揭秘React源码：解析6.Legacy模式和Concurrent模式

2023-12-11 16:27:54

React 源码解析：解构 Legacy 模式与 Concurrent 模式

简介

React 作为业界领先的前端框架，凭借其强大的功能和直观的开发体验脱颖而出。为了满足不同应用场景的需求，React 提供了多种模式，其中最显著的便是 Legacy 模式和 Concurrent 模式。本文将深入剖析这两种模式的异同，帮助开发者根据项目需求做出明智的选择。

Legacy 模式：传统之道

Legacy 模式是 React 最初的默认模式，也是最传统的渲染机制。在 Legacy 模式下，React 按照自上而下的顺序渲染整个组件树，然后将结果输出到 DOM。这种方法虽然简单直接，但存在一些明显的缺点：

性能瓶颈： 当组件树庞大时，Legacy 模式的单线程渲染容易导致页面卡顿，影响用户体验。
内存消耗： 渲染组件树的过程需要在内存中创建虚拟 DOM 树，这可能消耗大量的内存资源。

Concurrent 模式：拥抱并发

Concurrent 模式是 React 在 v16 中引入的新模式，旨在克服 Legacy 模式的局限性。Concurrent 模式打破了自上而下的渲染限制，将组件树分割成更小的部分并并发渲染。完成渲染的部分会立即输出到 DOM，无需等待整个组件树渲染完毕。

这种并发机制带来了一系列优势：

提升性能： Concurrent 模式有效改善了渲染性能，特别是对于大型组件树，它可以显著减少页面卡顿现象。
降低内存消耗： 并发渲染减少了同时渲染的组件数量，从而降低了内存开销。
支持新特性： Concurrent 模式引入了 Suspense 和 Lazy Loading 等新特性，进一步提升了 React 应用的性能和可扩展性。

Legacy 模式与 Concurrent 模式的对比

特性	Legacy 模式	Concurrent 模式
渲染方式	顺序渲染整个组件树	并发渲染组件树的不同部分
性能	大组件树性能较差	大组件树性能较好
内存消耗	内存消耗较高	内存消耗较低
支持的新特性	不支持 Suspense、Lazy Loading	支持 Suspense、Lazy Loading

如何在 React 应用中启用 Concurrent 模式

要启用 Concurrent 模式，只需在 React 应用的根组件中设置 useConcurrentMode 标志即可。代码示例如下：

import React from 'react';

const App = () => {
  return (
    <React.StrictMode>
      <div>Hello, world!</div>
    </React.StrictMode>
  );
};

export default App;