setState总结

2022-06-01  本文已影响0人  云高风轻

1. 前言

  1. 总结下setState用法
  2. 不要直接修改 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


参考资料

state


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
上一篇 下一篇

猜你喜欢

热点阅读