react使用setState注意事项

React设计setState方法就是为了重新渲染页面

看看下面的代码实现的结果：

state = {
    value ： 0
}

function test() {
    this.setState({ value: this.state.value + 1 });
    this.setState({ value: this.state.value + 1 });
    this.setState({ value: this.state.value + 1 });
}

test()   //发现最后value 是1，只加了一次


function test1() {
    this.setState((state, props) => ({ value: state.value + 1 }));
    this.setState((state, props) => ({ value: state.value + 1 }));
    this.setState((state, props) => ({ value: state.value + 1 }));
}

test1()  // 发现最后value 是3, 结果就如我们所意了

因为使用函数式setState，React会保证每次调用函数时，state都已经合并了之前的状态修改结果。

---

多次setState会合并

前面我们了解到setState并不会立即改变state的值，而是将其放到一个任务队列里，最终将多个setState合并，一次性更新页面。所以我们可以在代码里多次调用setState，每次只需要关注当前修改的字段即可。

多次setState会合并为什么会合并

主要是setState触发页面重新渲染， 需要经过以下生命周期：

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

经过测试，其实state的值只有在render的时候才真正被修改了

// shouldComponentUpdate: 0

// componentWillUpdate: 0

// render: 1

// componentDidUpdate: 1

// shouldComponentUpdate: 1

// componentWillUpdate: 1

// render: 2

// componentDidUpdate: 2

// shouldComponentUpdate: 2

// componentWillUpdate: 2

// render: 3

// componentDidUpdate: 3