setState函数是什么?
- 将需要处理的变化塞入组建的state对象中
- 告诉该组件及其子组件需要用更新的状态来重新渲染
- 响应事件处理喝服务端响应更新用户界面的主要方式
setState经典例子
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increase = this.increase.bind(this);
}
increase() {
this.setState({ count: this.state.count + 1 });
// 第一次输出
console.log('第一次输出:', this.state.count);
this.setState({ count: this.state.count + 1 });
// 第二次输出
console.log('第二次输出:', this.state.count);
setTimeout(() => {
this.setState({ count: this.state.count + 1 });
// 第三次输出
console.log('第三次输出:', this.state.count);
this.setState({ count: this.state.count + 1 });
// 第四次输出
console.log('第四次输出:', this.state.count);
}, 1000)
}
不知道你们心里是否有上面代码的答案了呢?不错,正确输出是:0 0 2 3
。那可能刚开始学React的童鞋就会问了?为什么前面都是0,后面的正常加了了?那这个setState究竟是同步的还是异步的了?那么,接下来就为你解答心中的疑惑=。=
合并更新
前两次的setState,不会立即改变React组件中的state的值,这两次输出的都是0;合并更新,将多次的setState合并成一次,不引发重复渲染
setTimeout 同步更新,引发两次渲染。
setState是异步的吗?
其实,这只是React的障眼法。
那setState
究竟干了什么了?
setState()
中有个特别重要的布尔属性isBatchingUpdates
(默认为false),它决定了state
是同步更新还是异步更新。
为什么直接修改this.state无效
React.setState中的同步更新
当然了,我们也是有办法同步获取state更新
后的值:
setTimeout
等异步操作中调用setState
函数DOM
原生事件- 利用
setState
回调函数 - 函数式
setState
用法
前两个都是比较好理解,因为没有前置的batchdUpdate
调用,所以isBatchingUpdates
为false
。不会开启批量更新模式。
后面两个方法,是React本身提供的。要注意的是,setState
回调函数要在render函数
被重新执行后才执行。
// 回调函数
this.setState({ count: 1 }, () => {
console.log(this.state.count)
})
// 函数式
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
对比VUE批量更新
Vue
在监听到数据变化后,会开启一个队列,并缓冲在同一事件循环中发生的所有数据变更(如果同一个watcher
被多次触发,只会被推入到队列中一次)。然后,在下一次事件循环Tick/微任务
中,Vue刷新队列执行实际工作。
vue批量更新体现为:
Mutation Observer(变动观察器
)是侦听DOM
变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。- 概念上,它很接近事件。可以理解为,当DOM发生变动会触发Mutation Observer事件。但是,它与事件有一个本质区别:事件是同步触发,DOM发生变化会立刻出发响应的事件。
- Mutation Observer是异步触发,DOM发生变动,并不会立刻触发,而是要等到当前所有DOM操作都结束后才会触发。
针对以上的知识点,我们来看看下面这段代码,看我们是否理解setState:
class Demo extends React.Component {
state = {
count: 0,
};
componentDidMount() {
this.setState({
count: this.state.count + 1,
});
console.log("console: " + this.state.count);
this.setState({ count: this.state.count + 1 }, () => {
console.log("console from callback: " + this.state.count);
});
this.setState(
(prevState) => {
console.log("console from func: " + prevState.count);
return {
count: prevState.count + 1,
};
},
() => {
console.log("last console: " + this.state.count);
}
);
}
render() {
console.log("render: " + this.state.count);
return <h4>test</h4>;
}
}
总结
state
更新需要通过setState
,而不能直接操作state
。- 调用
setState
更新,state
不会立刻生效。 - 多个顺序执行的
setState
不是同步一个个执行,会加入到一个队列中,然后最后一起执行,及批量更新。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!