残缺高频题库仓库地址: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