setState总结
2022-06-01 本文已影响0人
云高风轻
1. 前言
- 总结下setState用法
- 不要直接修改 State
2. 第一个参数是函数
state的更新异步的,所以React会把多个
setState
调用合并
成一个调用
所以下面的代码可能导致无法更新计数器
错误的写法
this.setState({
counter: this.state.counter + this.props.increment,
});
正确的写法
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
参数1: 旧的state 可选参数
参数2: props 可选参数
3. 第一个参数是 对象
this.setState({
name: 'yzs',
age:32
});
//错误的写法
this.state.name = 'yzs'
4. 第二个参数是函数
this.setState({
num:this.state.num +100
},()=>{
// 异步函数 DOM更新末尾执行的
console.log("react --nextTick:",this.refs.testRef.innerHTML);
//****************** 简洁写法
console.log("简洁获取DOM:",this.yzsRef.innerHTML);
})
1.第二个参数是函数,第一个参数对象或者是函数都不影响
2.第二个参数是函数:作用相当于 vue的nextTick
在 OM 更新循环结束之后执行延迟回调,获取更新后的DOM