当前位置：首页 > article >正文

React是如何工作的？

article 2024/10/23 19:30:51

从编写组件到最后屏幕生成界面，如上图所示，我们现在需要知道的就是后面几步是如何运行的。

概述

这张图解释了 React 渲染过程的几个阶段：

渲染触发：通过更新某处的状态来触发渲染。
渲染阶段：React 调用组件函数，确定如何更新 DOM。这是内部计算阶段，不会立即对屏幕产生视觉变化。
提交阶段：React 实际写入 DOM，进行元素的更新、插入和删除。
浏览器绘制：浏览器将更新后的内容绘制到屏幕上。

在 React 中，渲染并不是指更新 DOM 或在屏幕上显示元素。渲染仅在 React 内部发生，不会直接产生视觉变化。

渲染触发

渲染触发条件

初次渲染：应用程序的初始渲染。
状态更新：一个或多个组件实例的状态更新（重新渲染）。

直觉上的状态更新如下：

但其实并不是，实际上它是批量更新的。

例子如下：

关键点

渲染过程是为整个应用程序触发的。
实际上，看起来 React 只重新渲染状态更新的组件，但背后工作并非如此。
渲染不会立即触发，而是安排在 JavaScript 引擎有空闲时间时执行。事件处理程序中的多个 setState 调用也会进行批处理。

渲染阶段

什么是虚拟DOM？

它只是一个javascript对象。

为什么需要协调（Reconciliation）和区别（diffing）？

纤维树（Fiber tree）是什么？

React 元素树（虚拟 DOM）：左侧显示了一个 React 组件树，包含组件如 App、Video、Modal、Overlay、h3 和 button。这是 React 的虚拟 DOM 表示。
Fiber 树：右侧是 Fiber 树，它在初次渲染时被创建。每个组件实例和 DOM 元素都有一个对应的“fiber”。
Fiber：每个 fiber 是一个“工作单元”，包含以下信息：
- 当前状态
- 属性（Props）
- 副作用
- 使用的钩子（hooks）
- 工作队列
纤维树的特点：
- 内部树结构：每个组件实例和DOM元素都有一个对应的“fiber”。这些fiber节点形成了一个树状结构，用于描述UI界面。
- Fiber节点不在每次渲染时重新创建：这意味着React可以复用已有的fiber节点，从而减少不必要的计算和内存使用。
- 异步渲染
  - 异步完成工作：Fiber允许将渲染任务分成小块，利用浏览器的空闲时间进行处理。这种方式避免了长时间阻塞主线程，提高了应用的响应性。
  - 任务优先级调度：React可以根据任务的重要性来决定执行顺序，优先处理用户交互等关键任务。
- 并发特性
  - 支持并发特性：Fiber架构支持React中的并发模式，使得应用能够更好地处理复杂交互和动态变化，例如Suspense或过渡效果。
  - 长时间渲染不会阻塞JavaScript引擎：通过将渲染过程分割成小块，React能够在不中断用户界面的情况下进行更新。
- 具体实现
  - 增量式渲染：通过将渲染任务分配到多个帧中，React可以保持应用的流畅性，即使在复杂布局或大量计算时也能保持响应。
  - 可中断和恢复的渲染：在需要时，React可以暂停当前任务，并在稍后恢复，从而提高用户体验。