共计 1259 个字符，预计需要花费 4 分钟才能阅读完成。
React 三种启用模式
legacy 模式：
ReactDOM.render(<App />, rootNode);
// 这个模式是以后 React App 应用的模式，然而可能不反对某些新个性 blocking 模式：
ReactDOM.createBlockingRoot(rootNode).render(<App />);
// 过渡模式 concurrent 模式：
ReactDOM.createRoot(rootNode).render(<App />);
// 终极模式 为什么有三种模式
这三种模式中，咱们常常应用的是 legacy 模式，这种模式在渲染是触发的是同步的渲染链路。blocking 模式是 legacy 模式到 concurrent 模式的一个过渡，之所以会有这个模式是因为，React 团队心愿提供渐进的迁徙模式，而不是断崖式的切换模式。concurrent 模式是 React 的终极模式，也是 React 团队应用 Fiber 架构重写外围算法的动机。
依照官网的说法，“久远来看，模式的数量会收敛，不必思考不同的模式，但就目前而言，模式是一项重要的迁徙策略，让每个人都能决定本人什么时候迁徙，并依照本人的速度进行迁徙”。
legacy 模式和 concurrent 模式的不同
React 将会通过批改 mode 属性为不同的值，来标识以后处于哪个渲染模式；在执行过程中，也是通过判断这个属性，来辨别不同的渲染模式。在源码中，咱们能够看到会常常 fiber.mode 这个值，他就是用来标记以后处于哪个模式下的。举个例子：
function requestUpdateLane(fiber) {
// 获取 mode 属性
var mode = fiber.mode;
// 联合 mode 属性判断以后的
if ((mode & BlockingMode) === NoMode) {return SyncLane;} else if ((mode & ConcurrentMode) === NoMode) {return getCurrentPriorityLevel() === ImmediatePriority$1 ? SyncLane : SyncBatchedLane;
}
......
return lane;
}
因而不同的渲染模式在挂载阶段的差别，实质上来说并不是工作流的差别（其工作流波及 初始化 → render → commit 这 3 个步骤），而是 mode 属性的差别。mode 属性决定着这个工作流是零打碎敲（同步）的，还是分片执行（异步）的。
也就是换句话说，legacy 模式和 concurrent 模式的不同就是同步异步的不同 。
思考一个问题，异步渲染肯定是 Fiber 吗？
后面有提到，concurrenet 模式是 React 团队应用 Fiber 重写外围算法的动机，然而重源码的角度来看，不论是不是 concurrent 模式，Fiber 架构曾经深刻到源码了。也就是说在 legacy 模式下也是存在 Fiber，所以 Fiber 架构师不齐全和异步渲染 === 的，能够说他同时兼容了同步渲染和异步渲染。
借鉴：修言大神的《深入浅出搞定 React》，心愿文字对大家有帮忙。
