对react中setState的总结

setState 如何工作：

正常来说：每次调用 setState 修改属性后，都会触发重新渲染组件。

而重新渲染组件的方法则是一个 updater 方法。这个方法会在React Dom/React Dom Server/React Native 创建类的实例之后立即设置。这也是，不同环境下使用setState都产生一致效果的原因。

而不正常的请情况下，比如同一个方法内，多次调用 setState ，它们只会触发一次 re-render。但是同一个方法的异步调用 setState 则会调用同setState次数的 re-render (updater)：

// 同步调用
onClick = () => {
    let { count } = this.state;
    
    this.setState({
        count: ++count
    });
    
    this.setState({
        count: ++count
    });
} // re-render 次数：1

// 异步调用
onClickAsync = () => {
    let { count } = this.state;
    
    this.setState({
        count: ++count
    });
    
    setTimeout(() => {
        this.setState({
            count: ++count
        });
    }, 0);
} // re-render 次数：2
复制代码

而在 render 方法或者 componentWillUpdate / componentDidUpdate 内部调用了 setState，因为 setState会触发重新渲染组件，因此会出现循环调用的情况。此时React会抛出错误Maximum update depth exceeded.，超出最大更新深度，这是因为React限制了嵌套更新的数量以防止无限循环。

有总结才有收获。