从0到一实现React Fiber从零到一实现React Fiber

为什么引入fiber

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待如果 JavaScript线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿而这也正是React 15 的 Stack Reconciler 所面临的问题，当React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况，

JavaScript执行Javascript引擎和页面渲染在同一个线程中，GUI渲染和Javascript执行两者之间是互斥的工如果某个任务执行时间过长，浏览器就会推迟渲染。这就引入了Fiber

React Fiber是React 16引入的一种新的协调引擎，它的目标是使React能够更好地处理大型应用和动态更新。Fiber的主要目标是实现以下几个方面的改进：

增量渲染：将渲染工作分成多个小任务，避免长时间占用主线程，从而提高应用的响应性。

可中断和恢复：在渲染过程中，可以中断当前的渲染任务，并在稍后恢复，这样可以更好地利用浏览器的主线程。

优先级调度：根据任务的优先级来调度渲染工作，确保高优先级的任务（如用户交互）能够优先执行。

并发模式：支持并发模式，使得React可以同时处理多个更新任务，提高渲染效率。

Fiber执行阶段

每次渲染有两个阶段:Reconciliation(协调render阶段)和Commit(提交阶段) - 协调的阶段:可以认为是Diff阶段，这个阶段可以被终止，这个阶段会找出所有节点变更，例如节点新增、删除、属性变更等等，这些变更React称之为副作用。 - 提交阶段:将上一阶段计算出来的需要处理的副作用(effects)一次性执行了。这个阶段必须同步执行，不能被打断。

Fiber的核心概念

Fiber是React中用于表示组件树的数据结构，每个Fiber节点对应一个React组件实例或DOM节点。Fiber节点包含以下关键属性：

type ：组件的类型（类组件或函数组件）。

key ：组件的唯一标识。

props ：组件的属性。

stateNode ：组件对应的DOM节点或组件实例。

return ：父Fiber节点。

child ：第一个子Fiber节点。

sibling ：下一个兄弟Fiber节点。

alternate ：当前Fiber节点的旧版本（用于并发模式）。

Fiber树在执行时采用的是链表结构，存放指针如上几个，具备了可以随机存取的特性，而且时间复杂度很低，当中断或者优先调度某个Fiber的时候都能很快的找到他的父节点和子节点和兄弟节点，完整渲染的时候是按照树的深度优先遍历的。

手写简单的Render函数

下面是一个简化的React Fiber渲染过程的实现，包括创建Fiber节点和基本的协调过程：

// 定义Fiber节点
class Fiber {constructor(type, key, props, returnFiber) {this.type = type;this.key = key;this.props = props;this.return = returnFiber;this.child = null;this.sibling = null;this.alternate = null;this.stateNode = null;}
}
// 创建Fiber树的函数
function createFiberTree(element, returnFiber) {const fiber = new Fiber(element.type, element.key, element.props, returnFiber);if (typeof element.type === 'function') {// 如果是函数组件，调用它并获取子元素const children = element.type(element.props);reconcileChildren(fiber, children);} else {// 如果是DOM元素，设置stateNodefiber.stateNode = createDom(fiber);}return fiber;
}
// 创建DOM节点的函数
function createDom(fiber) {const dom =fiber.type === 'TEXT_ELEMENT'? document.createTextNode(''): document.createElement(fiber.type);updateDom(dom, {}, fiber.props);return dom;
}
// 更新DOM的函数
const isEvent = key => key.startsWith('on');
const isProperty = key =>key !== 'children' && !isEvent(key) && key !==  'key';
function updateDom(dom, prevProps, nextProps) {// 移除旧的属性Object.keys(prevProps).filter(isProperty).filter(name => !(name in nextProps)).forEach(name => {dom[name] = '';});// 设置新的属性Object.keys(nextProps).filter(isProperty).forEach(name => {dom[name] = nextProps[name];});// 移除旧的事件监听器Object.keys(prevProps).filter(isEvent).forEach(name => {const eventType = name.toLowerCase().substring(2);dom.removeEventListener(eventType, prevProps[name]);});// 添加新的事件监听器Object.keys(nextProps).filter(isEvent).forEach(name => {const eventType = name.toLowerCase().substring(2);dom.addEventListener(eventType, nextProps[name]);});
}
// 协调子元素的函数
function reconcileChildren(wipFiber, elements) {let index = 0;let oldFiber = wipFiber.alternate && wipFiber.alternate.child;let prevSibling = null;while (index < elements.length || oldFiber != null) {const element = elements[index];let newFiber = null;const sameType = oldFiber && element && element.type === oldFiber.type;if (sameType) {newFiber = {type: oldFiber.type,key: oldFiber.key,props: element.props,return: wipFiber,stateNode: oldFiber.stateNode,alternate: oldFiber,};newFiber.child = oldFiber.child;newFiber.sibling = oldFiber.sibling;oldFiber = oldFiber.sibling;} else if (element) {newFiber = createFiberTree(element, wipFiber);} else if (oldFiber) {oldFiber.return.child = null;}if (oldFiber === null) {if (newFiber != null) {if (prevSibling == null) {wipFiber.child = newFiber;} else {prevSibling.sibling = newFiber;}}} else if (newFiber == null) {if (prevSibling == null) {wipFiber.child = null;} else {prevSibling.sibling = null;}}prevSibling = newFiber;index++;}
}
// 简单的render函数
function render(element, container) {const rootFiber = createFiberTree(element, null );const dom = rootFiber.stateNode;container.appendChild(dom);
}
// 示例使用
const element = {type: 'div',props: {children: 'Hello, Fiber!',},
};
render(element, document.getElementById('root'));