共计 2521 个字符，预计需要花费 7 分钟才能阅读完成。
残缺高频题库仓库地址：https://github.com/hzfe/aweso…
残缺高频题库浏览地址：https://febook.hzfe.org/
相干问题
- Fiber 是什么
- 谈谈你对 Fiber 的理解
- Fiber 对 React 的应用带来了什么影响
答复关键点
调度 深度优先遍历
Fiber 是 React 16 中采纳的新协调（reconciliation）引擎，次要指标是反对虚构 DOM 的渐进式渲染。
Fiber 将原有的 Stack Reconciler 替换为 Fiber Reconciler，进步了简单利用的可响应性和性能。次要通过以下形式达成指标：
- 对大型简单工作的分片。
- 对工作划分优先级，优先调度高优先级的工作。
- 调度过程中，能够对工作进行挂起、复原、终止等操作。
Fiber 对现有代码的影响：因为 Fiber 采纳了全新的调度形式，工作的更新过程可能会被打断，这意味着在组件更新过程中，render 及其之前的生命周期函数可能会调用屡次。因而，在下列生命周期函数中不应呈现副作用。
- shouldComponentUpdate
- React 16 中曾经申明废除的钩子
- componentWillMount（UNSAFE\_componentWillMount）
- componentWillReceiveProps（UNSAFE\_componentWillReceiveProps）
- componentWillUpdate（UNSAFE\_componentWillUpdate）
知识点深刻
1. React 是如何工作的
import React from "react";
import ReactDOM from "react-dom";
function App() {return <div>Hello, HZFE.</div>;}
ReactDOM.render(<App />, document.getElementById("root"));
下面代码中咱们引入的两个包，别离代表了 React 的 core API 层和渲染层，在这背地还有一层被称为协调器（Reconcilers）的档次。（协调器在 react-reconciler 中实现）
一个 React 组件的渲染次要经验两个阶段：
- 调度阶段（Reconciler）：用新的数据生成一棵新的树，而后通过 Diff 算法，遍历旧的树，疾速找出须要更新的元素，放到更新队列中去，失去新的更新队列。
- 渲染阶段（Renderer）：遍历更新队列，通过调用宿主环境的 API，理论更新渲染对应的元素。宿主环境如 DOM，Native 等。
对于调度阶段，新老架构中有不同的解决形式：
React 16 之前应用的是 Stack Reconciler（栈协调器），应用递归的形式创立虚构 DOM，递归的过程是不能中断的。如果组件树的层级很深，递归更新组件的工夫超过 16ms，用户交互就会感觉到卡顿。
图片起源 react conf 17
React 16 及当前应用的是 Fiber Reconciler（纤维协调器），将递归中无奈中断的更新重构为迭代中的异步可中断更新过程，这样就可能更好的管制组件的渲染。
图片起源 react conf 17
2. Fiber Reconciler 如何工作
因为浏览器中 JS 的运行环境是单线程的，因而，一旦有工作耗时过长，就会阻塞其余工作的执行，导致浏览器不能及时响应用户的操作，从而使用户体验降落。为解决这个问题，React 推出了 Fiber Reconciler 架构。
在 Fiber 中，会把一个耗时很长的工作分成很多小的工作片，每一个工作片的运行工夫很短。尽管总的工作执行工夫仍然很长，然而在每个工作小片执行完之后，都会给其余工作一个执行机会。这样，惟一的线程就不会被独占，其余工作也可能失去执行机会。
为了实现渐进渲染的目标，Fiber 架构中引入了新的数据结构：Fiber Node，Fiber Node Tree 依据 React Element Tree 生成，并用来驱动实在 DOM 的渲染。
Fiber 节点的大抵构造：
{
tag: TypeOfWork, // 标识 fiber 类型
type: 'div', // 和 fiber 相干的组件类型
return: Fiber | null, // 父节点
child: Fiber | null, // 子节点
sibling: Fiber | null, // 同级节点
alternate: Fiber | null, // diff 的变动记录在这个节点上
...
}
Fiber 树结构如下：
图片起源 react conf 17
Fiber 的次要工作流程：
ReactDOM.render()疏导 React 启动或调用setState()的时候开始创立或更新 Fiber 树。- 从根节点开始遍历 Fiber Node Tree，并且构建 WokeInProgress Tree（reconciliation 阶段）。
- 本阶段能够暂停、终止、和重启，会导致 react 相干生命周期反复执行。
- React 会生成两棵树，一棵是代表以后状态的 current tree，一棵是待更新的 workInProgress tree。
- 遍历 current tree，重用或更新 Fiber Node 到 workInProgress tree，workInProgress tree 实现后会替换 current tree。
- 每更新一个节点，同时生成该节点对应的 Effect List。
- 为每个节点创立更新工作。
- 将创立的更新工作退出工作队列，期待调度。
- 调度由 scheduler 模块实现，其外围职责是执行回调。
- scheduler 模块实现了跨平台兼容的 requestIdleCallback。
- 每解决完一个 Fiber Node 的更新，能够中断、挂起，或复原。
- 依据 Effect List 更新 DOM（commit 阶段）。
- React 会遍历 Effect List 将所有变更一次性更新到 DOM 上。
- 这一阶段的工作会导致用户可见的变动。因而该过程不可中断，必须始终执行直到更新实现。
React 调度流程图：
参考资料
- React Fiber Architecture
- React Conf 2017
- Inside Fiber
