说一下我理解的 React - batchUpdate 机制

目录

概述

一、setState 主流程

二、batchUpdate 机制

三、setState 本身是异步还是同步？

四、哪些事件能命中/不能命中 batchUpdate 机制？

五、(扩展) transaction （事务）机制

---

概述

batchUpdate 机制（批量更新机制）是理解 React 组件更新流程的重点，要搞清楚主要流程。

梳理这篇博客，来帮助我更好地理解和记忆，水平有限，看到的同学如有发现讲的不对的地方，烦请指正。

一、setState 主流程

先来看下 setState 的主流程：依据 setState来设置新值，并将新值存入 pending 队列中后，判断是否处于 batch update ，如果处于，则把组件进行标记，并存入 dirtyComponents 中，即先保存后更新（异步），不处于的话，就直接遍历所有 dirtyComponents 组件，调用更新，即直接遍历然后更新（同步）。

在了解了 setState 主流程后，我们会发现有一环是 batch update ，React 做的批量更新，首先我们来了解下 React 为什么要有这么一个机制，个人理解是，控制 DOM 渲染的次数，即不管组件的数量多少和复杂程度如何，尽量控制多次操作一次渲染，这样可以减少 DOM 的渲染次数，提高性能。