手写React的Fiber架构，深入理解其原理

熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Fiber的架构，提升了用户体验，同时还引入了 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">hooks等特性。那隐藏在React背后的原理是怎样的呢， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Fiber和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">hooks又是怎么实现的呢？本文会从 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">jsx入手，手写一个简易版的React，从而深入理解React的原理。

本文主要实现了这些功能:

简易版Fiber架构

简易版DIFF算法

简易版函数组件

简易版Hook: <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState

娱乐版 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Class组件

本文代码地址：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/fiber-and-hooks

本文程序跑起来效果如下：

JSX和creatElement

以前我们写React要支持JSX还需要一个库叫 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">JSXTransformer<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">js，后来JSX的转换工作都集成到了babel里面了，babel还提供了在线预览的功能，可以看到转换后的效果，比如下面这段简单的代码:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><div>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1 id<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"title"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Title<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">a href<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"xxx"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Jump<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">a<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Article`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">p<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">section<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

经过babel转换后就变成了这样：

上面的截图可以看出我们写的HTML被转换成了 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement，我们将上面代码稍微格式化来看下：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'div'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'h1'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      id<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'title'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'Title'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'a'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      href<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'xxx'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">},`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'Jump'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'section'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'p'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'Article'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">),`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

从转换后的代码我们可以看出 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement支持多个参数:

1. type，也就是节点类型
2. config, 这是节点上的属性，比如 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">id和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">href
3. children, 从第三个参数开始就全部是children也就是子元素了，子元素可以有多个，类型可以是简单的文本，也可以还是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement，如果是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement，其实就是子节点了，子节点下面还可以有子节点。这样就用 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement的嵌套关系实现了HTML节点的树形结构。

让我们来完整看下这个简单的React页面代码：

渲染在页面上是这样：

这里面用到了React的地方其实就两个，一个是JSX，也就是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement，另一个就是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">ReactDOM<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render，所以我们手写的第一个目标就有了，就是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render这两个方法。

手写createElement

对于 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><h1<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">id<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">=<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">"title"<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Title<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">这样一个简单的节点，原生DOM也会附加一大堆属性和方法在上面，所以我们在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement的时候最好能将它转换为一种比较简单的数据结构，只包含我们需要的元素，比如这样：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'h1'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    id<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'title'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'Title'`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

有了这个数据结构后，我们对于DOM的操作其实可以转化为对这个数据结构的操作，新老DOM的对比其实也可以转化为这个数据结构的对比，这样我们就不需要每次操作都去渲染页面，而是等到需要渲染的时候才将这个数据结构渲染到页面上。这其实就是虚拟DOM！而我们 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement就是负责来构建这个虚拟DOM的方法，下面我们来实现下：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">...<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 核心逻辑不复杂，将参数都塞到一个对象上返回就行`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// children也要放到props里面去，这样我们在组件里面就能通过this.props.children拿到子元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">...<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      children`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

上述代码是React的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement简化版，对源码感兴趣的朋友可以看这里：https://github.com/facebook/react/blob/60016c448bb7d19fc989acd05dda5aca2e124381/packages/react/src/ReactElement.js#L348

手写render

上述代码我们用 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement将JSX代码转换成了虚拟DOM，那真正将它渲染到页面的函数是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render，所以我们还需要实现下这个方法，通过我们一般的用法 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">ReactDOM<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">(<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">App<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">/>,<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">document<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">getElementById<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">(<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">'root'<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">));可以知道他接收两个参数：

1. 根组件，其实是一个JSX组件，也就是一个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement返回的虚拟DOM
2. 父节点，也就是我们要将这个虚拟DOM渲染的位置

有了这两个参数，我们来实现下 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render方法：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> container<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  let dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 检查当前节点是文本还是对象`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">typeof<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> vDom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">!==<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'object'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    dom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> document<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createTextNode<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    dom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> document<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">createElement<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 将vDom上除了children外的属性都挂载到真正的DOM上去`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Object<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">keys<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">filter<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">key <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> key <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">!=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'children'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">forEach<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">item <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">item<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">item<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果还有子元素，递归调用`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">length<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    vDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">forEach<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">));`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  container<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">appendChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

上述代码是简化版的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render方法，对源码感兴趣的朋友可以看这里：https://github.com/facebook/react/blob/3e94bce765d355d74f6a60feb4addb6d196e3482/packages/react-dom/src/client/ReactDOMLegacy.js#L287

现在我们可以用自己写的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">createElement和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render来替换原生的方法了：

可以得到一样的渲染结果：

为什么需要Fiber

上面我们简单的实现了虚拟DOM渲染到页面上的代码，这部分工作被React官方称为renderer，renderer是第三方可以自己实现的一个模块，还有个核心模块叫做reconsiler，reconsiler的一大功能就是大家熟知的diff，他会计算出应该更新哪些页面节点，然后将需要更新的节点虚拟DOM传递给renderer，renderer负责将这些节点渲染到页面上。但是这个流程有个问题，虽然React的diff算法是经过优化的，但是他却是同步的，renderer负责操作DOM的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">appendChild等API也是同步的，也就是说如果有大量节点需要更新，JS线程的运行时间可能会比较长，在这段时间浏览器是不会响应其他事件的，因为JS线程和GUI线程是互斥的，JS运行时页面就不会响应，这个时间太长了，用户就可能看到卡顿，特别是动画的卡顿会很明显。在React的官方演讲中有个例子，可以很明显的看到这种同步计算造成的卡顿：

而Fiber就是用来解决这个问题的，Fiber可以将长时间的同步任务拆分成多个小任务，从而让浏览器能够抽身去响应其他事件，等他空了再回来继续计算，这样整个计算流程就显得平滑很多。下面是使用Fiber后的效果：

怎么来拆分

上面我们自己实现的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render方法直接递归遍历了整个vDom树，如果我们在中途某一步停下来，下次再调用时其实并不知道上次在哪里停下来的，不知道从哪里开始，所以vDom的树形结构并不满足中途暂停，下次继续的需求，需要改造数据结构。另一个需要解决的问题是，拆分下来的小任务什么时候执行？我们的目的是让用户有更流畅的体验，所以我们最好不要阻塞高优先级的任务，比如用户输入，动画之类，等他们执行完了我们再计算。那我怎么知道现在有没有高优先级任务，浏览器是不是空闲呢？总结下来，Fiber要想达到目的，需要解决两个问题：

1. 新的任务调度，有高优先级任务的时候将浏览器让出来，等浏览器空了再继续执行
2. 新的数据结构，可以随时中断，下次进来可以接着执行

requestIdleCallback

<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">requestIdleCallback是一个实验中的新API，这个API调用方式如下:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 开启调用`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">var<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> handle <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> window<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">requestIdleCallback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">callback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> options<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">])`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 结束调用`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Window<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">cancelIdleCallback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">handle<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> `</ol>

<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">requestIdleCallback接收一个回调，这个回调会在浏览器空闲时调用，每次调用会传入一个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">IdleDeadline，可以拿到当前还空余多久， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">options可以传入参数最多等多久，等到了时间浏览器还不空就强制执行了。使用这个API可以解决任务调度的问题，让浏览器在空闲时才计算diff并渲染。更多关于requestIdleCallback的使用可以查看MDN的文档。但是这个API还在实验中，兼容性不好，所以React官方自己实现了一套。本文会继续使用 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">requestIdleCallback来进行任务调度，我们进行任务调度的思想是将任务拆分成多个小任务， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">requestIdleCallback里面不断的把小任务拿出来执行，当所有任务都执行完或者超时了就结束本次执行，同时要注册下次执行，代码架子就是这样：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workLoop<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">deadline<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">while<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> deadline<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">timeRemaining<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 这个while循环会在任务执行完或者时间到了的时候结束`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> performUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果任务还没完，但是时间到了，我们需要继续注册requestIdleCallback`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  requestIdleCallback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">workLoop<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// performUnitOfWork用来执行任务，参数是我们的当前fiber任务，返回值是下一个任务`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> performUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">requestIdleCallback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">workLoop<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

上述 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">workLoop对应React源码看这里。

Fiber可中断数据结构

上面我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">performUnitOfWork并没有实现，但是从上面的结构可以看出来，他接收的参数是一个小任务，同时通过这个小任务还可以找到他的下一个小任务，Fiber构建的就是这样一个数据结构。Fiber之前的数据结构是一棵树，父节点的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">children指向了子节点，但是只有这一个指针是不能实现中断继续的。比如我现在有一个父节点A，A有三个子节点B,C,D，当我遍历到C的时候中断了，重新开始的时候，其实我是不知道C下面该执行哪个的，因为只知道C，并没有指针指向他的父节点，也没有指针指向他的兄弟。Fiber就是改造了这样一个结构，加上了指向父节点和兄弟节点的指针：

上面的图片还是来自于官方的演讲，可以看到和之前父节点指向所有子节点不同，这里有三个指针：

1. child: 父节点指向第一个子元素的指针。
2. sibling：从第一个子元素往后，指向下一个兄弟元素。
3. return：所有子元素都有的指向父元素的指针。

有了这几个指针后，我们可以在任意一个元素中断遍历并恢复，比如在上图 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">List处中断了，恢复的时候可以通过 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">child找到他的子元素，也可以通过 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">return找到他的父元素，如果他还有兄弟节点也可以用 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">sibling找到。Fiber这个结构外形看着还是棵树，但是没有了指向所有子元素的指针，父节点只指向第一个子节点，然后子节点有指向其他子节点的指针，这其实是个链表。

实现Fiber

现在我们可以自己来实现一下Fiber了，我们需要将之前的vDom结构转换为Fiber的数据结构，同时需要能够通过其中任意一个节点返回下一个节点，其实就是遍历这个链表。遍历的时候从根节点出发，先找子元素，如果子元素存在，直接返回，如果没有子元素了就找兄弟元素，找完所有的兄弟元素后再返回父元素，然后再找这个父元素的兄弟元素。整个遍历过程其实是个深度优先遍历，从上到下，然后最后一行开始从左到右遍历。比如下图从 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">div1开始遍历的话，遍历的顺序就应该是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">div1<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">div2<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">h1<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">a<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">div2<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">p<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">div1。可以看到这个序列中，当我们 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">return父节点时，这些父节点会被第二次遍历，所以我们写代码时， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">return的父节点不会作为下一个任务返回，只有 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">sibling和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">child才会作为下一个任务返回。

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// performUnitOfWork用来执行任务，参数是我们的当前fiber任务，返回值是下一个任务`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> performUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 根节点的dom就是container，如果没有这个属性，说明当前fiber不是根节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> createDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">   <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 创建一个DOM挂载上去`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> `<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果有父节点，将当前节点挂载到父节点上`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">appendChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 将我们前面的vDom结构转换为fiber结构`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  let prevSibling <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">elements <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">length<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">for<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let i <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> i <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">length<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> i<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">++)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">i<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> newFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 父级的child指向第一个子元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">i <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> newFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 每个子元素拥有指向下一个子元素的指针`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        prevSibling<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sibling <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> newFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      prevSibling <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 这个函数的返回值是下一个任务，这其实是一个深度优先遍历`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 先找子元素，没有子元素了就找兄弟元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 兄弟元素也没有了就返回父元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 然后再找这个父元素的兄弟元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 最后到根节点结束`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 这个遍历的顺序其实就是从上到下，从左到右`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  let nextFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">while<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sibling<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> nextFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sibling<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> nextFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

React源码中的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">performUnitOfWork看这里，当然比我们这个复杂很多。

统一commit DOM操作

上面我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">performUnitOfWork一边构建Fiber结构一边操作DOM <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">appendChild，这样如果某次更新好几个节点，操作了第一个节点之后就中断了，那我们可能只看到第一个节点渲染到了页面，后续几个节点等浏览器空了才陆续渲染。为了避免这种情况，我们应该将DOM操作都搜集起来，最后统一执行，这就是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commit。为了能够记录位置，我们还需要一个全局变量 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">workInProgressRoot来记录根节点，然后在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">workLoop检测如果任务执行完了，就 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commit:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workLoop<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">deadline<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">while<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> deadline<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">timeRemaining<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 这个while循环会在任务执行完或者时间到了的时候结束`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> performUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 任务做完后统一渲染`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    commitRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">();`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果任务还没完，但是时间到了，我们需要继续注册requestIdleCallback`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  requestIdleCallback<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">workLoop<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

因为我们是在Fiber树完全构建后再执行的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commit，而且有一个变量 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">workInProgressRoot指向了Fiber的根节点，所以我们可以直接把 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">workInProgressRoot拿过来递归渲染就行了：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 统一操作DOM`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> commitRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">workInProgressRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 开启递归`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  workInProgressRoot <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">     <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 操作完后将workInProgressRoot重置`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentDom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  parentDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">appendChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 递归操作子元素和兄弟元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sibling<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

reconcile调和

reconcile其实就是虚拟DOM树的diff操作，需要删除不需要的节点，更新修改过的节点，添加新的节点。为了在中断后能回到工作位置，我们还需要一个变量 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">currentRoot，然后在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">fiber节点里面添加一个属性 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">alternate，这个属性指向上一次运行的根节点，也就是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">currentRoot。<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">currentRoot会在第一次 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render后的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commit阶段赋值，也就是每次计算完后都会把当次状态记录在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">alternate上，后面更新了就可以把 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">alternate拿出来跟新的状态做diff。然后 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">performUnitOfWork里面需要添加调和子元素的代码，可以新增一个函数 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">reconcileChildren。这个函数里面不能简单的创建新节点了，而是要将老节点跟新节点拿来对比，对比逻辑如下:

1. 如果新老节点类型一样，复用老节点DOM，更新props
2. 如果类型不一样，而且新的节点存在，创建新节点替换老节点
3. 如果类型不一样，没有新节点，有老节点，删除老节点

注意删除老节点的操作是直接将 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">oldFiber加上一个删除标记就行，同时用一个全局变量 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">deletions记录所有需要删除的节点：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 对比oldFiber和当前element`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> sameType <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">//检测类型是不是一样`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 先比较元素类型`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sameType<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果类型一样，复用节点，更新props`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        newFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 记录下上次状态`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          effectTag<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'UPDATE'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">           <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 添加一个操作标记`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sameType <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果类型不一样，有新的节点，创建新节点替换老节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        newFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> element<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">                    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 构建fiber时没有dom，下次perform这个节点是才创建dom`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">              <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 新增的没有老状态`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          effectTag<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'REPLACEMENT'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 添加一个操作标记`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sameType <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 如果类型不一样，没有新节点，有老节点，删除老节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">effectTag <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'DELETION'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">   <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 添加删除标记`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        deletions<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">push<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">oldFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 一个数组收集所有需要删除的节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

然后就是在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commit阶段处理真正的DOM操作，具体的操作是根据我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">effectTag来判断的:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentDom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">effectTag <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'REPLACEMENT'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    parentDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">appendChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">effectTag <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'DELETION'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    parentDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">removeChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">effectTag <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'UPDATE'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 更新DOM属性`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    updateDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 递归操作子元素和兄弟元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">sibling<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

替换和删除的DOM操作都比较简单，更新属性的会稍微麻烦点，需要再写一个辅助函数 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">updateDom来实现:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 更新DOM的操作`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> updateDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> prevProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> nextProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 1. 过滤children属性`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 2. 老的存在，新的没了，取消`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 3. 新的存在，老的没有，新增`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Object<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">keys<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">prevProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">filter<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">!==<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'children'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">filter<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">!(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name in nextProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">))`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">forEach<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">indexOf<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'on'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">removeEventListener<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">substr<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">).<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">toLowerCase<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(),<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> prevProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">false<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">''<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">});`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Object<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">keys<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">nextProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">filter<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">!==<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'children'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">forEach<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">indexOf<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'on'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">addEventListener<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">substr<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">2<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">).<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">toLowerCase<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(),<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> nextProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">false<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> nextProps<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">name<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">});`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">updateDom的代码写的比较简单，事件只处理了简单的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">on开头的，兼容性也有问题， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">prevProps和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">nextProps可能会遍历到相同的属性，有重复赋值，但是总体原理还是没错的。要想把这个处理写全，代码量还是不少的。

函数组件

函数组件是React里面很常见的一种组件，我们前面的React架构其实已经写好了，我们这里来支持下函数组件。我们之前的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">fiber节点上的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">type都是DOM节点的类型，比如 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">h1什么的，但是函数组件的节点 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">type其实就是一个函数了，我们需要对这种节点进行单独处理。

首先需要在更新的时候检测当前节点是不是函数组件，如果是， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">children的处理逻辑会稍微不一样:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// performUnitOfWork里面`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 检测函数组件`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> performUnitOfWork<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> isFunctionComponent <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">instanceof<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">isFunctionComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    updateFunctionComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    updateHostComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// ...下面省略n行代码...`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> updateFunctionComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 函数组件的type就是个函数，直接拿来执行可以获得DOM元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> children <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">type<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  reconcileChildren<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// updateHostComponent就是之前的操作，只是单独抽取了一个方法`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> updateHostComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> createDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">   <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 创建一个DOM挂载上去`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> `<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 将我们前面的vDom结构转换为fiber结构`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">children<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 调和子元素`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  reconcileChildren<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> elements<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

然后在我们提交DOM操作的时候因为函数组件没有DOM元素，所以需要注意两点：

1. 获取父级DOM元素的时候需要递归网上找真正的DOM
2. 删除节点的时候需要递归往下找真正的节点

我们来修改下 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">commitRootImpl:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> commitRootImpl<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// const parentDom = fiber.return.dom;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 向上查找真正的DOM`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  let parentFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">while<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(!<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">parentFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    parentFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentDom <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// ...这里省略n行代码...`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">effectTag <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'DELETION'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    commitDeletion<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> parentDom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> commitDeletion<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> domParent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// dom存在，是普通节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    domParent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">removeChild<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">else<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// dom不存在，是函数组件,向下递归查找真实DOM`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    commitDeletion<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">child<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> domParent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

现在我们可以传入函数组件了:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">import<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> from <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./myReact'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">ReactDOM<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1 id<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"title"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>{<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">title<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">a href<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"xxx"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Jump<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">a<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">section<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">p<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">          <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Article`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">p<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">section<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">ReactDOM<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> title<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"Fiber Demo"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">/>,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  document<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">getElementById<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'root'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

实现useState

<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState是React Hooks里面的一个API，相当于之前 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Class<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Component里面的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state，用来管理组件内部状态，现在我们已经有一个简化版的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React了，我们也可以尝试下来实现这个API。

简单版

我们还是从用法入手来实现最简单的功能，我们一般使用 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState是这样的：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setCount<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> onClickHandler <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    setCount<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">count <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">button onClick<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">={<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">onClickHandler<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">button<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">ReactDOM<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">App<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> title<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">"Fiber Demo"<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">/>,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  document<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">getElementById<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'root'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

上述代码可以看出，我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState接收一个初始值，返回一个数组，里面有这个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state的当前值和改变 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state的方法，需要注意的是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">App作为一个函数组件，每次 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render的时候都会运行，也就是说里面的局部变量每次 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render的时候都会重置，那我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state就不能作为一个局部变量，而是应该作为一个全部变量存储：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">init<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">?<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> init <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改state的方法`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 只要修改了state，我们就需要重新处理节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    workInProgressRoot <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改nextUnitOfWork指向workInProgressRoot，这样下次就会处理这个节点了`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    deletions <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

这样其实我们就可以使用了：

支持多个state

上面的代码只有一个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state变量，如果我们有多个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState怎么办呢？为了能支持多个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState，我们的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state就不能是一个简单的值了，我们可以考虑把他改成一个数组，多个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState按照调用顺序放进这个数组里面，访问的时候通过下标来访问:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let hookIndex <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">init<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentIndex <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> hookIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">currentIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">currentIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">===<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">undefined<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">?<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> init <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">currentIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改state的方法`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">currentIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 只要修改了state，我们就需要重新处理这个节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    workInProgressRoot <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改nextUnitOfWork指向workInProgressRoot，这样下次就会处理这个节点了`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    deletions <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  hookIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">++;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">currentIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">],<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

来看看多个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState的效果：

支持多个组件

上面的代码虽然我们支持了多个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState，但是仍然只有一套全局变量，如果有多个函数组件，每个组件都来操作这个全局变量，那相互之间不就是污染了数据了吗？所以我们数据还不能都存在全局变量上面，而是应该存在每个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">fiber节点上，处理这个节点的时候再将状态放到全局变量用来通讯:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 申明两个全局变量，用来处理useState`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// wipFiber是当前的函数组件fiber节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// hookIndex是当前函数组件内部useState状态计数`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let wipFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">let hookIndex <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">null<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`</ol>

因为 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState只在函数组件里面可以用，所以我们之前的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">updateFunctionComponent里面需要初始化处理 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState变量:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> updateFunctionComponent<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 支持useState，初始化变量`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  wipFiber <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> fiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  hookIndex <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">0<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  wipFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[];<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// hooks用来存储具体的state序列`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// ......下面代码省略......`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

因为 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">hooks队列放到 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">fiber节点上去了，所以我们在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState取之前的值时需要从 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">fiber<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">alternate上取，完整代码如下：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">init<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 取出上次的Hook`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldHook <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> wipFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">alternate <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> wipFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">&&<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> wipFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hookIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// hook数据结构`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> hook <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldHook <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">?<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> oldHook<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> init      <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// state是每个具体的值`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 将所有useState调用按照顺序存到fiber节点上`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  wipFiber<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hooks<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">push<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hook<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  hookIndex<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">++;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改state的方法`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    hook<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> value<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 只要修改了state，我们就需要重新处理这个节点`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    workInProgressRoot <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">dom<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      alternate<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> currentRoot`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// 修改nextUnitOfWork指向workInProgressRoot，这样下次requestIdleCallback就会处理这个节点了`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    nextUnitOfWork <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> workInProgressRoot<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    deletions <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[];`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">hook<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

上面代码可以看出我们在将 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState和存储的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state进行匹配的时候是用的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState的调用顺序匹配 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state的下标，如果这个下标匹配不上了， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state就错了，所以 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React里面不能出现这样的代码:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">if<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">something<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

上述代码不能保证每次 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">something都满足，可能导致 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">useState这次 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render执行了，下次又没执行，这样新老节点的下标就匹配不上了，对于这种代码， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React会直接报错：

用Hooks模拟Class组件

这个功能纯粹是娱乐性功能，通过前面实现的Hooks来模拟实现Class组件，这个并不是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React官方的实现方式哈~我们可以写一个方法将Class组件转化为前面的函数组件:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> transfer<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">function<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">const<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> component <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">new<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    let <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">[<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">,<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">]<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> useState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">setState <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> component<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">();`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`</ol>

然后就可以写Class了，这个Class长得很像我们在React里面写的Class，有 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">state, <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">setState和 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">render：

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">import<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> from <span style="box-sizing: border-box;color: rgb(123, 151, 38);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">'./myReact'<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">class<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count4<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  constructor<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">)<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">props <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> props<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">;`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  onClickHandler <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">=><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">setState<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">({`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">count <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">})`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  render<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">()<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">return<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h3<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Class<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> component <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">:<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">{<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">state<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}</<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">h3<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">        <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">button onClick<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">={<span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">this<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">onClickHandler<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}><span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">+<span style="box-sizing: border-box;color: rgb(223, 83, 32);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">1<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">button<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">      <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">    <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> `<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">}`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><br></br><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(156, 148, 145);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">// export的时候用transfer包装下`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">export<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(102, 102, 234);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">default<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"> <span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">React<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">.<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">transfer<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">(<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count4<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">);`</ol>

然后使用的时候直接:

<pre style="box-sizing: border-box;padding-top: 8px;padding-bottom: 6px;background: rgb(241, 239, 238);border-radius: 0px;overflow-y: auto;color: rgb(80, 97, 109);text-align: start;font-size: 10px;line-height: 12px;font-family: consolas, menlo, courier, monospace, "Microsoft Yahei" !important;border-width: 1px !important;border-style: solid !important;border-color: rgb(226, 226, 226) !important;"><ol class="list-paddingleft-2" style="padding-top: 12px;padding-bottom: 12px;padding-left: 40px;list-style-position: initial;list-style-image: initial;color: rgb(156, 148, 145);overflow-y: auto;list-style-type: none !important;"><li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;background-image: initial !important;background-position: initial !important;background-size: initial !important;background-repeat: initial !important;background-attachment: initial !important;background-origin: initial !important;background-clip: initial !important;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">  <span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"><<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count4<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">></<span style="box-sizing: border-box;color: rgb(64, 126, 231);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">Count4<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`<li style="box-sizing: border-box;padding-left: 1em;list-style-type: decimal;"><span style="box-sizing: border-box;color: rgb(74, 74, 74);display: block;line-height: 22px;font-size: 14px !important;word-break: inherit !important;"><span style="box-sizing: border-box;line-height: 22px;display: block;word-break: inherit !important;"><code style="white-space: pre-wrap;box-sizing: border-box;margin-left: -20px;display: flex;overflow: initial;line-height: 12px;overflow-wrap: normal;border-width: 0px;border-style: initial;border-color: initial;font-size: 10px;font-family: inherit !important;"><span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;"></<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">div<span style="box-sizing: border-box;color: rgb(27, 25, 24);line-height: 20px;font-size: 13px !important;white-space: inherit !important;">>`</ol>

当然你也可以在 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">React里面建一个空的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">class<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Component，让 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;font-size: 14px;">Count4继承他，这样就更像了。

好了，到这里我们代码就写完了，完整代码可以看我GitHub。

总结

1. 我们写的JSX代码被babel转化成了 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement。
2. <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">React<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">createElement返回的其实就是虚拟DOM结构。
3. <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">ReactDOM<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">.<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">render方法是将虚拟DOM渲染到页面的。
4. 虚拟DOM的调和和渲染可以简单粗暴的递归，但是这个过程是同步的，如果需要处理的节点过多，可能会阻塞用户输入和动画播放，造成卡顿。
5. Fiber是16.x引入的新特性，用处是将同步的调和变成异步的。
6. Fiber改造了虚拟DOM的结构，具有 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">父<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">第一个子， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">子<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">兄， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">子<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">父这几个指针，有了这几个指针，可以从任意一个Fiber节点找到其他节点。
7. Fiber将整棵树的同步任务拆分成了每个节点可以单独执行的异步执行结构。
8. Fiber可以从任意一个节点开始遍历，遍历是深度优先遍历，顺序是 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">父<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">子<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">兄<span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">-><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;"><span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">父，也就是从上往下，从左往右。
9. Fiber的调和阶段可以是异步的小任务，但是提交阶段( <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">commit)必须是同步的。因为异步的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">commit可能让用户看到节点一个一个接连出现，体验不好。
10. 函数组件其实就是这个节点的 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">type是个函数，直接将 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">type拿来运行就可以得到虚拟DOM。
11. <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">useState是在Fiber节点上添加了一个数组，数组里面的每个值对应了一个 <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">useState， <span style="box-sizing: border-box;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;display: inline-block;padding-right: 2px;padding-left: 2px;line-height: 22px;font-size: 14px !important;">useState调用顺序必须和这个数组下标匹配，不然会报错。

参考资料

A Cartoon Intro to Fiber：http://conf2017.reactjs.org/speakers/lin

妙味课堂大圣老师：手写react的fiber和hooks架构：https://study.miaov.com/v_show/4227

React Fiber：https://juejin.im/post/5ab7b3a2f265da2378403e57

这可能是最通俗的 React Fiber(时间分片) 打开方式：https://juejin.im/post/5dadc6045188255a270a0f85

浅析 React Fiber：https://juejin.im/post/5be969656fb9a049ad76931f

React Fiber架构：https://zhuanlan.zhihu.com/p/37095662

文章的最后，感谢你花费宝贵的时间阅读本文，如果本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是作者持续创作的动力。

作者博文GitHub项目地址：https://github.com/dennis-jiang/Front-End-Knowledges

作者掘金文章汇总：https://juejin.im/post/5e3ffc85518825494e2772fd

最后

===

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！ 欢迎关注「前端瓶子君」，回复「算法」自动加入，从0到1构建完整的数据结构与算法体系！在这里，瓶子君不仅介绍算法，还将算法与前端各个领域进行结合，包括浏览器、HTTP、V8、React、Vue源码等。在这里（算法群），你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！另外，每周还有手写源码题，瓶子君也会解答哟！ 》》面试官也在看的算法资料《《“在看和转发”就是最大的支持