React中使用setState

不要直接修改 State

state数据不能直接修改，必须要通过setState来修改。但是设置值的时候不能影响到之前state的值，举个栗子：

// 处理数组，不会改变原有数组
this.setState({
    list1: this.state.list1.concat(100), // 追加
    list2: [...this.state.list2, 100], // 追加
    list3: this.state.list3.slice(0, 3), // 截取
    list4: this.state.list4.filter(item => item > 100), // 筛选
    // 其他操作，要先用比如const list5Copy = this.state.list5.slice()生成一个副本，然后再对副本做操作
    list5: list5Copy 
})

// 处理对象，不会改变原有对象
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})

处理数组时不要使用push pop splice等方式，处理对象时不要直接对this.state.obj进行属性设置，因为这样违反不要直接修改state原则。

setState更新可能是同步也可能是异步

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。比如如下情况：

// 传入对象，会被合并。虽然3次setState, 但count值最后只会加1
this.setState({
    counter: this.state.counter + 1
})
this.setState({
    counter: this.state.counter + 1
})
this.setState({
    counter: this.state.counter + 1
})

此时this.state的更新就是异步更新了。那么有没有办法控制让其同步更新呢？要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

// 大括号包裹的箭头函数写return
this.setState((preState, props) => {
    return {
    counter: preState.counter + 1
    }
})
// 小括号包裹的箭头函数不用写return
this.setState((preState, props) => ({
    counter: preState.counter + 1   
}))
// 普通函数形式
this.setState(function(preState, props) {
    return {
    counter: preState.counter + 1
    }
})

这样的话，this.state就可以保持同步更能，最后显示的counter值是3而不是1了。

State 的更新会被合并

在讲setState更新可能是同步也可能是异步的时候已经讲啦。

参考资料

[1] 正确地使用 State