防抖动的UI更新
如果在很短的时间内重复设置状态,那么UI不会每次都更新,这属于防抖动。
这说明 setState()
内部有调用时间间隔的检测机制。
合并状态
React会合并第一级 state
字段。
善用异步
为了确保 setState()
会触发更新,可以善用异步sleep函数,而不是 this.forceUpdate()
,这没有效果:
import * as React from 'react';
async function sleep(n = 1000) {
return new Promise<void>((resolve, reject) => {
setTimeout(() => {
resolve();
}, n);
});
}
export default class extends React.Component {
state = {
n: -1,
}
ref = React.createRef<HTMLHeadingElement>();
onClick() {
(async () => {
for (var i = 0; i < 1000; i++) {
this.setState({
n: i
});
// this.forceUpdate(); // don't effect
await sleep(1);
console.log(this.ref.current.innerText);
}
})();
}
render() {
return (
<div>
<h1 ref={this.ref}>
The n is {this.state.n}
</h1>
<button onClick={() => this.onClick()}> 开始 </button>
</div>
);
}
};