React setState注意事项

Posted 2023-04-03

参考技术A 比如this.state.value=1
因为setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state合并后放入状态队列，而不会立即更新this.state。队列机制可以高效批量的更新state。如果直接修改this.state的值(不会触发render)，而不用setState，那么改state将不会被放入状态队列。当下次调用setState并对状态队列进行合并时，将会忽略之前被修改的state，造成无法预知的错误。

不能在shouldComponentUpdate、componentWillUpdate生命周期里使用setState，这会造成循环调用风险，造成死循环

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理)，以及生命周期函数调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

原因：在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

输出

react使用setstate注意的两点

1、this.state里的属性不修改，或是只修改一个，那么不修改的剩下的属性不会被变动。

this.state={
    name:"Aliece",
    age:19,
    msg:"未触发方法之前的信息。"
}

---
show=(arg1,arg2)=>{
    this.setState({
        msg:"利用show方法改变state里面msg的信息！但是只会修改msg，state里name和age不会改变！"
    })
}

2、关于其异步性，使用回调函数进行更新内容，也就是定义一个function，不过这个function我们称为毁掉函数。

this.state={
    name:"Aliece",
    age:19,
    msg:"未触发方法之前的信息。"
}

show={(arg1,arg2),function(){console.log(msg+"这里会是第二个msg的信息！")} }=>{
    this.setState({
        msg:"利用show方法改变state里面msg的信息！但是只会修改msg，state里name和age不会改变！"
    })
}