美文网首页
setState总结

setState总结

作者: 云高风轻 | 来源:发表于2022-06-01 16: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


初心

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

相关文章

  • react setState解读

    react setState解读 总结:看似同步,实则异步。 setState(updater, callback...

  • setState 总结

    引子:先来提神醒脑一下: 快写下你的答案,十行后公布答案~~~ 答案(10 10 12 13) OK 以下是知识点...

  • setState总结

    1. 前言 总结下setState用法不要直接修改 State 2. 第一个参数是函数 state的更新异步的,...

  • setState机制总结

    1.setState异步更新 不要直接修改state调用setState不会直接修改当前的state,而会将改变放...

  • react生命周期

    旧版声明周期 总结: 组件挂载时 setState流程 forceUpdate 强制更新 父组件render 新版...

  • react拓展

    setState() setState更新状态的2种方式 对象式的setState 函数式的setState 对象...

  • React setState 整理总结

    先看一个例子 假如有这样一个点击执行累加场景: 每一次点击, 累加三次,看一下输入: 并没有达到预期的效果,纠正也...

  • setState()状态更新函数

    理解setState的关键 setState不会立刻改变React组件中state的值; setState通过引发...

  • 08react基础-react原理

    setState()更新数据 setState()更新数据是异步的 注意:使用该语法,后面的setState不要依...

  • 『react』setState()特性

    一.setState()更新数据 由于setState()更新数据是异步的,所以后面的setState()不要依赖...

网友评论

      本文标题:setState总结

      本文链接:https://www.haomeiwen.com/subject/usdxmrtx.html