React # setState() 的重要性质

防抖动的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>
        );
    }
};

END