站长工具seo诊断ui设计实训报告
从编写组件到最后屏幕生成界面，如上图所示，我们现在需要知道的就是后面几步是如何运行的。
概述
这张图解释了 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可以暂停当前任务，并在稍后恢复，从而提高用户体验。
协调（Reconciliation）举例
区分（Diffing）举例
key prop是什么？
在list中使用key prop
使用key prop重置状态
这不是我们想要的，需要使用key prop进行重置state。
提交阶段
绘制阶段
总结
