建设个人网站详细点,手机微网站 模板,甘肃兰州气候特点,wordpress+站群软件文章目录 背景实现能力手撸开始demo流程拆解实现 render 函数构建 fiber 树处理工作单元实现 create fiber加入 diff fiber 的逻辑 commit 阶段hooks 实现 源码地址参考文章 背景
前文中学习了 react 中核心的 fiber 架构#xff0c;时间切片#xff0c;双缓存等#xff0c… 文章目录 背景实现能力手撸开始demo流程拆解实现 render 函数构建 fiber 树处理工作单元实现 create fiber加入 diff fiber 的逻辑 commit 阶段hooks 实现 源码地址参考文章 背景
前文中学习了 react 中核心的 fiber 架构时间切片双缓存等接下来这篇文章实操实现一个 mini-react巩固我们学习的这些知识。
React 探秘(一)fiber 架构
React 探秘(二)双缓存技术
React 探秘(三) 时间切片
实现能力
fiber 架构时间切片双缓存调和 create/diff fiberhooks-useState
手撸开始
demo
我们以一个简单的 Counter 函数组件为例进行分析
function Counter() {const [state, setState] Didact.useState(2);return (h1 onClick{() { setState(c c 1) }} styleuser-select: noneCount: {state}/h1);
}
const element Counter /;
const container document.getElementById(root);
MiniReact.render(element, container);流程拆解
入口 render 函数 初始化 workInProgress 开启 workLoop workLoop 函数 时间切片切分任务 vdom 转化为 fiber 节点 调和的过程 create/diff commit 阶段 处理 fiber 中不同类型的节点同步真实 dom
实现 render 函数
render 为我们的入口函数传入组件和根节点根据这两个数据初始化初始化我们的 workInProgress, 在 commit 完成之后才会进行 current 替换。
let workInProgress null;
let currentRoot null;
let deletions null;
let nextUnitOfWork null;// 此处的 element 为 { typefunction Counter() }
function render(element, container) {workInProgress {dom: container,props: {children: [element]},alternate: currentRoot};deletions [];// 开启工作单元nextUnitOfWork workInProgress;
}构建 fiber 树
根据上面得到的 fiber 根节点构建 fiberNode构建过程需要把 vdom 转化为 fiber 其中进行 create/diff子元素通过 child 连接兄弟节点通过 sibling 连接 return 记录父节点用作遍历。 本文 jsx 转化采用简单方式带过 每个 fiberNode 为一个工作单元循环构建 fiberNode直到没有fiberNode处理完所有的工作单元之后进入 commit 阶段。
/** 两种实现方式* 1. 采用 requestIdleCallback 模拟* 2. 宏任务实现 schedule *
*/
// requestIdleCallback 时间切片
function workLoop() {while (nextUnitOfWork) {// 得到下一个工作单元nextUnitOfWork performUnitOfWork(nextUnitOfWork);}// 没有fiber并且wip存在if (!nextUnitOfWork workInProgress) {commitRoot();}
}
requestIdleCallback(workLoop)// 2. 宏任务时间切片
// 参考文章 https://juejin.cn/post/7428168209709449268
function workLoop() {// 执行 shouldYieldToHost 来判断本次宏任务的 高频短间隔5ms 时间切片是否用尽while (!shouldYieldToHost() nextUnitOfWork) {performUnitOfWork();}if (nextUnitOfWork) {console.log(开启下一个宏任务继续执行剩余任务);return true;} else {return false;}
}处理工作单元
performUnitOfWork 为核心处理方法, 分为两个步骤
fiber 节点的构建 create 阶段 diff 阶段 Counter 组件的执行 得到 vdom 初始化 hooks
function performUnitOfWork(fiber) {// beginWorkconst isFunctionComponent fiber.type instanceof Function;if (isFunctionComponent) {// Counter 组件的执行updateFunctionComponent(fiber);} else {// fiberNode的构建updateHostComponent(fiber);}if (fiber.child) {return fiber.child;}let nextFiber fiber;// fiber 的循环操作 父-子-兄while (nextFiber) {if (nextFiber.sibling) {return nextFiber.sibling;}nextFiber nextFiber.return;}
}
// Counter 组件的执行
function updateFunctionComponent(fiber) {wipFiber fiber;hookIndex 0;wipFiber.hooks [];const children [fiber.type(fiber.props)];reconcileChildren(fiber, children);
}
// fiberNode的构建
function updateHostComponent(fiber) {if (!fiber.dom) {fiber.dom createDom(fiber);}reconcileChildren(fiber, fiber.props.children);
}第一次先构建根节点构建完成后 放入 wipFiber.child 中然后进行下一个工作循环此时 type 为 Counter 的 fucntion 执行该方法初始化 hooks 的值和得到 vdom 进行调和完成该 fiber 节点的构建一直复该动作直到没有其他节点.
实现 create fiber
接下来我们实现一下核心的调和的过程: 首先是 create fiber通过elementsvdom生成我们的 fiber 结构并打上 PLACEMENT 表示新增
function reconcileChildren(wipFiber, elements) {let index 0;let prevSibling null;while (index elements.length) {const element elements[index];let newFiber null;if (element !sameType) {newFiber {type: element.type,props: element.props,dom: null,return: wipFiber,alternate: null,effectTag: PLACEMENT};}if (index 0) {wipFiber.child newFiber;} else if (element) {prevSibling.sibling newFiber;}prevSibling newFiber;index;}
}加入 diff fiber 的逻辑
create fiber 有了, 接下来我们实现一下 diff 的过程.
diff 首先找到旧的 fiber 判断旧 fiber type 和 新的 vdom type 是否相同, 相同的话复则用 dom 信息, 打上 UPDATE 的标签。不同的话创建新的 fiber打上 PLACEMENT 标签。
如果 old fiber 存在, 但是 type 却不相同则把这个节点放入 deletions 数组打上 DELETION 标签
function reconcileChildren(wipFiber, elements) {console.log(reconcileChildren,elements);let index 0;let oldFiber wipFiber.alternate wipFiber.alternate.child;let prevSibling null;// 循环构造 child 和 sibing while (index elements.length || oldFiber ! null) {const element elements[index];let newFiber null;// 判断 type 是否相同const sameType oldFiber element element.type oldFiber.type;// 相同的话,复用 domif (sameType) {newFiber {type: oldFiber.type,props: element.props,dom: oldFiber.dom,return: wipFiber,alternate: oldFiber,effectTag: UPDATE};}if (element !sameType) {newFiber {type: element.type,props: element.props,dom: null,return: wipFiber,alternate: null,effectTag: PLACEMENT};}// 老节点塞入deletionsif (oldFiber !sameType) {oldFiber.effectTag DELETION;deletions.push(oldFiber); }if (oldFiber) {oldFiber oldFiber.sibling;}if (index 0) {wipFiber.child newFiber;} else if (element) {prevSibling.sibling newFiber;}prevSibling newFiber;// 遍历 props.children 数组节点index;}
}commit 阶段
在得到 fiber 树之后,进入我们的同步真实 dom 的过程. 这个阶段是不可暂停的, 采用递归的方式完成 fiber 的同步.
function commitRoot() {deletions.forEach(commitWork);commitWork(workInProgress.child);// 渲染完成后, 双缓存树的替换currentRoot workInProgress;workInProgress null;
}// 下面为核心代码
function commitWork(fiber) {// 根据type 判断执行 if (fiber.effectTag PLACEMENT fiber.dom ! null) {domParent.appendChild(fiber.dom);} else if (fiber.effectTag UPDATE fiber.dom ! null) {updateDom(fiber.dom, fiber.alternate.props, fiber.props);} else if (fiber.effectTag DELETION) {commitDeletion(fiber, domParent);}// 递归操作 fiber 树 commitWork(fiber.child);commitWork(fiber.sibling);
}
hooks 实现
根据之前对 fiber 学习我们知道 hooks 在 fiber 上的存储也是以链表的数据结构存储存储在 memoizedState 上。
const [state, setState] useState(0) 根据用法我们可以推断出:
该方法返回值 return [state, setState], state 是一个状态setState 是改变状态的方法。根据特性 state 变更组件会 reRender 的特性推测出setState 在计算出最新的值后会重启 workLoop。 function useState(initial) {// setState 后初始化 oldHookif (!oldHook) {oldHook wipFiber.alternate?.memoizedState}// 每次进入重新构建 hookconst hook {state: oldHook ? oldHook.state : initial,queue: [],next: oldHook ? oldHook.next : null,};// 拿到当前 hook 的任务队列const actions oldHook ? oldHook.queue : [];// 计算最新的 state actions.forEach(action {hook.state action(hook.state);});// 构建 hook 链表if (!workInProgressHook) {workInProgressHook hookwipFiber.memoizedState workInProgressHook;} else {workInProgressHook workInProgressHook.next hook}// 获取下一个 hook oldHook oldHook oldHook.nextconst setState action {hook.queue.push(action);// 重新构建 workInProgressworkInProgress {dom: currentRoot.dom,props: currentRoot.props,alternate: currentRoot};oldHook nullworkInProgressHook null// 设置下一个工作单元 reRendernextUnitOfWork workInProgress;deletions [];};return [hook.state, setState];
}至此我们就基本完成了一个简单的 mini-react上面代码直接截取了关键代码如果感兴趣的话可以结合下面源码进行本地调试。
源码地址
mini-react https://github.com/lovelts/mini-react/blob/master/src/index.js
参考文章
react 源码
workLoop https://github.com/facebook/react/blob/v18.3.1/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
beginWork https://github.com/facebook/react/blob/v18.3.1/packages/react-reconciler/src/ReactFiberBeginWork.new.js
schedule https://github.com/facebook/react/blob/v18.3.1/packages/scheduler/src/forks/Scheduler.js
commitWork https://github.com/facebook/react/blob/v18.3.1/packages/react-reconciler/src/ReactFiberCommitWork.new.js
hooks https://github.com/facebook/react/blob/v18.3.1/packages/react-reconciler/src/ReactFiberHooks.new.js
build-your-own-react https://pomb.us/build-your-own-react/
