React如何确保SetState 的更新是原地生效的？

发布时间：2023-07-10 11:00:24 所属栏目：教程来源：网络

导读： 　　为大家详细介绍“react的setstate同步情况是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“react的setstate同步情况是什么”文章能帮助大家解决疑惑，下面

　　为大家详细介绍“react的setstate同步情况是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“react的setstate同步情况是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

　　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。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!