• 技术文章 >web前端 >前端问答

    react的setstate什么时候同步

    藏色散人藏色散人2023-01-06 10:46:55原创105

    react的setstate在原生事件和setTimeout中都是“同步”的,而在合成事件和钩子函数中是“异步”的;在React中,如果是由React引发的事件处理,调用setState不会同步更新“this.state”,除此之外的setState调用会同步执行“this.state”。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react的setstate什么时候同步?什么时候是异步的?

    先给出答案:

    有时表现出异步,有时表现出同步。

    setState只在合成事件和钩子函数中是“异步”的,在原生事件和setTimeout 中都是同步的。

    class Example extends React.Component {
      constructor() {
        super();
        this.state = {
          val: 0
        };
      }
      
      componentDidMount() {
        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 1 次 log
        this.setState({val: this.state.val + 1});
        console.log(this.state.val);    // 第 2 次 log
        setTimeout(() => {
          this.setState({val: this.state.val + 1});
          console.log(this.state.val);  // 第 3 次 log
          this.setState({val: this.state.val + 1});
          console.log(this.state.val);  // 第 4 次 log
        }, 0);
      }
      render() {
        return null;
      }
    };

    1.setState只在合成事件和钩子函数中是“异步”的,在原生事件和setTimeout 中都是同步的。

    2.setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,

    导致在合成事件和钩子函数中没法立马拿到更新后的值,形成了所谓的“异步”,当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。

    3.setState 的批量更新优化也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和setTimeout 中不会批量更新,

    在“异步”中如果对同一个值进行多次setState,setState的批量更新策略会对其进行覆盖,取最后一次的执行,如果是同时setState多个不同的值,在更新时会对其进行合并批量更新。

    在React中,如果是由React引发的事件处理(比如通过onClick引发的事件处理),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.state。所谓“除此之外”,指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。

    原因:

    在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates默认是false,也就表示setState会同步更新this.state,但是,有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state。

    详细请看 https://github.com/LuNaHaiJiao/blog/issues/26

    推荐学习:《react视频教程

    以上就是react的setstate什么时候同步的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:setstate React
    上一篇:react中怎么用link跳转 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react native怎么隐藏组件• react有哪些方法改变state• react怎么实现点击隐藏显示• react 属于什么框架
    1/1

    PHP中文网