React是如何工作的？

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

概述

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

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

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

 渲染触发

渲染触发条件

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

直觉上的状态更新如下：

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

例子如下：

关键点

• 渲染过程是为整个应用程序触发的。
• 实际上，看起来 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可以暂停当前任务，并在稍后恢复，从而提高用户体验。

 协调（Reconciliation）举例

 区分（Diffing）举例

key prop是什么？

在list中使用key prop

使用key prop重置状态 

这不是我们想要的，需要使用key prop进行重置state。

 提交阶段

绘制阶段

总结