中国建设监理协会网站会员专区,包头网站开发建设,wordpress 自建邮件,河南省网站建设意见setState函数是异步的还是同步的#xff1f;
可能很多同学在看到这个问题的时候#xff0c;甚至搞不清楚这个问题在问什么。
不要慌#xff0c;我们看一下下面这个例子,首先我们创建一个类组件,这个类组件中#xff0c;我们定义了state是一个对象#xff0c;对象中有一个…setState函数是异步的还是同步的
可能很多同学在看到这个问题的时候甚至搞不清楚这个问题在问什么。
不要慌我们看一下下面这个例子,首先我们创建一个类组件,这个类组件中我们定义了state是一个对象对象中有一个属性为countcount的初始值为0,再页面中设置了一个h2标签标签显示count的值同时添加了一个button按钮每次点击按钮使用setState对count进行1同时输出当前count的值 class Example extends React.Component {constructor(props) {super(props);this.state {count: 0};}render() {return (divh2count: {this.state.count}./h2button onClick{(){this.setState({count:this.state.count1});console.log(count,this.state.count);}}/button/div);}}运行之后大家可以尝试一下点击按钮之后count在页面中会显示count:1,但是控制台console.log输出的是0再点击一次count在页面中会显示count:2,但是控制台console.log输出的是1不管我们点击多少次情况一直是这样。
但是从代码的角度上来说点击之后setState起作用这个时候console出来的state应该是最新的state才对但是输出结果却不是这样的console.log中没有同步更新数据所以我们认为setState是异步处理数据变化的
这句话怎么理解呢?
首先我们来看一下setState的定义setState接受一个带有形式参数的 updater 函数也可能直接是一个对象与一个回调callback可选。 setState(updater, [callback])
官方明确表示setState对于this.state并不是立刻更新若在调用setState后想要立刻获取到最新的this.state那么建议在setState的callback或者声明周期componentDidUpdate中获取
所以如果立即想获得setState更新后的数据可以写在callback中 class Example extends React.Component {constructor(props) {super(props);this.state {count: 0};}render() {return (divh2count: {this.state.count}./h2button onClick{(){this.setState({count:this.state.count1},(){console.log(count,this.state.count);});}}/button/div);}}这个时候我们运行后就能发现我们能立马获得setState更新后的数据。
回到我们刚开始的问题setState是同步的还是异步的用一句话概括就是 异步更新同步执行setState函数本身并不是异步的但是对state的处理机制给人一种异步的假象state处理一般发生在生命周期发生变化的时候
为什么官方要这样去设置呢我们继续深挖一下依然是上面的代码但是click函数中setState函数调用了两次 class Example extends React.Component {constructor(props) {super(props);this.state {count: 0};}render() {return (divh2count: {this.state.count}./h2button onClick{(){this.setState({count:this.state.count1},(){console.log(count,this.state.count);});this.setState({count:this.state.count1},(){console.log(count,this.state.count);});}}/button/div);}}当点击按钮我们需要连着两次执行setState那么react会帮我们修改两次this.state然后重新render两次吗很明显并不是react会批量合并多次setState操作上述例子num最终是2且render在点击后只会渲染一次。
也就是我们所说的只有生命周期发生变化state才会变化否则this.state一直拿到的就是上一次渲染后的。
React在开始重新渲染之前 会有意地进行等待直到所有在组件的事件处理函数内调用的 setState()都完成之后再做最终的this.state变更这样可以通过避免不必要的重新渲染来提升性能。
那么如果我们的目的就是想让他连着更新两次呢该怎么修改这段代码呢
前面我们讲了setState的定义setState(updater, [callback])第一个参数updater除了可以是对象还可以是函数写成函数就可以解决这个问题了 class Example extends React.Component {constructor(props) {super(props);this.state {count: 0};}render() {return (divh2count: {this.state.count}./h2button onClick{(){//这里函数里的参数的prestate和preprops都是最新更改的上一次的state和propsthis.setState((prestate,preprops){return {count:pre.count1}},(){console.log(count,this.state.count);});this.setState((prestate,preprops){return {count:pre.count1}},(){console.log(count,this.state.count);});}}/button/div);}}这样我们发现当我们点击按钮页面的count和终端的count都每次增加2了
