文章29 | 阅读 13238 | 点赞0
与Vue不同,React的设置变量是异步的。
setState()
这是一个异步操作,如:
class HelloWord extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
this.clickCountAsync = this.clickCountAsync.bind(this)
}
// 渲染函数,this 指向实例本身
render() {
return <div>
<button onClick={this.clickCountAsync}>异步增加count</button>
</div>
}
clickCountAsync() {
console.log('【异步】setState之前,count的值:', this.state.count)
this.setState({
count: this.state.count + 1
})
console.log('【异步】setState之后,count的值:', this.state.count)
}
}
会发现,两个 log 语句,输出的结果的值,都是一样的。
原因是 React 会合并多个 setState,然后统一更新;
那么如何获取更新后的数据,答案是通过回调函数;
说明见注释
class HelloWord extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
anotherCount: 0
}
this.clickCountAsync = this.clickCountAsync.bind(this)
this.clickCountSync = this.clickCountSync.bind(this)
}
// 渲染函数,this 指向实例本身
render() {
return <div>
<button onClick={this.clickCountAsync}>异步增加count</button>
<br/>
<button onClick={this.clickCountSync}>增加count,并同步更新计数器二的值等于异步增加后的count</button>
<br/>
计数器二:{this.state.anotherCount}
</div>
}
clickCountAsync() {
console.log('【异步】setState之前,count的值:', this.state.count)
this.setState({
count: this.state.count + 1
})
console.log('【异步】setState之后,count的值:', this.state.count)
}
clickCountSync() {
// 通过setState 更新 state.count 的值
this.clickCountAsync()
// 1、这里是更新前的值
console.log('【同步】setState之前,count的值:', this.state.count)
this.setState((prevState, props) => {
// 3、这里的回调函数,是更新后执行(即
console.log(prevState, props)
// 返回值就像设置 setState 的参数一样
return {
anotherCount: prevState.count
}
})
// 2、这里也是更新前的值
console.log('【同步】setState之后,count的值:', this.state.count)
}
}
当然,这又出现一个问题,那就是假如我调用一个方法,分别修改了 A 变量,然后又调用某个方法需要修改 B 变量,并且 B 变量依赖于 A 变量修改后的值(这就是以上场景);
可是假如我又需要调用第三个方法修改 C 变量,并且 C 的值依赖于 B 修改后的值。那么这就有问题了。
原因是:
解决办法:
componentWillUpdate(nextProps, nextState)
,将依赖的变量的修改逻辑,添加到这个函数里,如下面代码,可以解决部分场景的问题;componentWillUpdate(nextProps, nextState) {
nextState.anotherCount *= 2
console.log(nextProps, nextState)
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq20004604/article/details/79318197
内容来源于网络,如有侵权,请联系作者删除!