react 学习(四) 批量更新及合成事件

最新推荐文章于 2024-08-02 10:33:22 发布

weixin_41364787

最新推荐文章于 2024-08-02 10:33:22 发布

阅读量801

点赞数

分类专栏：与前端沾边文章标签：前端 reactjs

本文链接：https://blog.csdn.net/weixin_41364787/article/details/124115419

版权

本文探讨React的批量更新机制，通过状态栈实现更新过滤，避免重复执行。接着讲解React的事件合成，包括事件处理的统一、兼容性和模拟事件冒泡，最后通过示例演示了事件冒泡的模拟过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 react 自身的逻辑不符。本小节我们学习下数据的批量更新和 react 中的事件处理。

批量更新

回顾

上一节我们并行执行两个 setState 方法，从下图可知，两个函数同时执行了：

handleClick = () => {
  this.setState({
    number: this.state.number + 1,
  });
  this.setState({
    number: this.state.number + 1,
  });
};

其实对于完全两个一样的方法，我们可以过滤掉，只执行最后一次的操作。那如何批量处理呢？那就是用栈先存起来，用一个状态记录，看是存储还是执行更新。

实现批量存储

这里我们定义一个对像，记录字段如下：

当前是存储还是执行的状态
存储的栈
批量更新的方法

export const updateQueue = {
  isBatchingUpdate: false, // 是否是批量更新，true 要批量更新我们就存，false 我们就执行
  updaters: new Set(), // 当前更新队列中保存的所有的 updaters 实例，每个 updater 实例对应一个组件
  batchUpdate() {
    updateQueue.isBatchingUpdate = false; // 要执行了我们还原为 false，为下次再执行重新初始化
    // 批量更新
    for (const updater of updateQueue.updaters) {
      updater.updateComponent();  // 每个组件有自己的更新方法
    }
    updateQueue.updaters.clear(); // 执行完后清空
  },
};

我们在添加状态的时候，会触发更新方法