首页 文章 精选 留言 我的

React源码解析系列：实现一个包含时间切片、fiber、Hooks的简易React

2020-12-02 660

遵循真实的React代码架构，实现一个包含时间切片、fiber、Hooks的简易React，舍弃部分优化代码和非必要的功能，命名为HuaMu

目录

  • CreateElement函数
  • Render函数
  • 并发模式
  • Fibers
  • Render和Commit阶段
  • Reconciliation
  • Function Components
  • Hooks

一、JSX转换为JS

React通过 Babel 将JSX转换为JS，以tagName、props和children作为参数，调用CreateElement函数，将标签转化为对象输出

// 转换前
const el = <h1 title="el_title">HuaMu<h1>;

// 转换后
const el = {
  type:"h1",
  props:{
    title:"el_title",
    children:"HuaMu",
  }
}

使用原生js实现render功能

// 创建容器
const container = document.getElementById("root")
​
// 创建 h1 节点
const node = document.createElement(el.type);
node["title"]= el.props.title;

// 创建 孩子 节点
const text = document.createTextNode("");
text["nodeValue"] = el.props.children;

// 追加`textNode`到`h1` 后，再将`h1`追加到`container`
node.appendChild(text);
container.appendChild(node);

** 注意：文本节点使用textNode而不是innerText，保证以相同的方式对待所有的元素 **

二、CreateElement函数

正如上面演示的，元素是具有type和props属性的对象，因此，CreateElement函数唯一需要做的就是创建该对象

/**
 * @param {string} type    HTML元素
 * @param {object} props   具有JSX属性中的所有键和值
 * @param {string | array} children 元素树
 */
function CreateElement(type, props, ...children) {
  return {
    type,
    props:{
      ...props,
      children,
    }
  }
}

将剩余参数赋予children，扩展运算符用于构造字面量对象props将对象表达式按照key-value的方式展开，保证props.children始终是一个数组。

// 例子
CreateElement("div")
CreateElement("div", null, a)
CreateElement("div", null, a, b)

// 例子3 返回
{
  "type": "div",
  "props": { "children": [a, b] }
}

** 注意：当...children为空或为原始值时，React不会创建props.children，但为了简化代码，暂不考虑性能，为原始值创建特殊的类型TEXT_EL**

function CreateElement(type, props, ...children) {
  return {
    type,
    props:{
      ...props,
**      children: children.map(child => typeof child === "object" ? child : CreateTextElement(child))
    }
  }
}

function CreateTextElement(text) {
  return {
    type: "TEXT_EL",
    props: {
      nodeValue: text,
      children: []
    }
  }
}

二、Render函数

1、添加内容

  • 创建对应的DOM节点，然后将新节点附加到容器中，并递归每个孩子节点做同样的操作
  • 将元素的props属性分配给节点
function Render(el,container) {
  // 创建节点
  const dom = el.type === 'TEXT_EL'? document.createTextNode("") : document.createElement(el.type);
  el.props.children.forEach(child => Render(child, dom))
  // 为节点分配props属性
  const isProperty = key => key !== 'children';
  const setProperty = name => dom[name] = el.props[name];
  Object.keys(el.props).filter(isProperty).forEach(setProperty)
  container.appendChild(dom);
}

执行一下demo，看看效果呐！

2、更新内容

3、删除内容

三、并发模式

1、递归存在的问题

一旦开始渲染，便不会停止，直到渲染了整棵元素树，如果元素树很大，可能会阻塞主线程，且妨碍浏览器执行高优作业（必须等到它渲染完成）

2、解决方案

将任务分解为多个工作单元，每完成一个工作单元，判断是否有高优作业，若有，则让浏览器中断渲染

  • window.requestIdleCallback(cb[, options]) ：浏览器将在主线程空闲时运行回调。函数会接收到一个IdleDeadline的参数，这个参数可以获取当前空闲时间(timeRemaining)以及回调是否在超时前已经执行的状态(didTimeout)。

  • React 已不再使用requestIdleCallback，目前使用scheduler package。但在概念上是相同的

let nextUnitOfWork = null;

function PerformUnitOfWork(nextUnitOfWork) {
  // TODO：执行工作并返回下一个执行的工作单元
}

function WorkLoop(deadline) {
  // 当前线程的闲置时间是否可以在结束前执行更多的任务
  let shouldYield = false;
  while(nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = PerformUnitOfWork(nextUnitOfWork)
    shouldYield = deadline.timeRemaining() < 1;  // 如果idle period已经结束，则它的值是0
  }
  requestIdleCallback(WorkLoop)
}

// 当浏览器准备就绪时，它将调用WorkLoop
requestIdleCallback(WorkLoop)

四、Fibers

为了组织工作单元，即方便查找下一个工作单元，需引入fiber tree的数据结构。每个元素都有一个fiber，链接到其第一个子节点，下一个兄弟姐妹节点和父节点，且每个fiber都将成为一个工作单元。

// 假设我们要渲染的元素树如下
const el = (
  <div>
    <h1>
      <p />
      <a />
    </h1>
    <h2 />
  </div>
)

其对应的fiber tree如下： Fibers

在Render中，设置为nextUnitOfWork为root fiber，剩余的fiber将在performUnitOfWork函数上执行以下三件事：

  • 为元素创建节点并添加到dom
  • 为元素的子代创建fiber
  • 选择下一个执行工作单元

<span id="code1"> 👇

// 创建节点部分独立出来
function CreateDom(fiber) {
  const dom = fiber.type === 'TEXT_EL'? document.createTextNode("") : document.createElement(fiber.type);
  // 为节点分配props属性
  const isProperty = key => key !== 'children';
  const setProperty = name => dom[name] = fiber.props[name];
  Object.keys(fiber.props).filter(isProperty).forEach(setProperty)
  return dom
}

function Render(el,container) {
  // 设置 nextUnitOfWork 为 root fiber
  nextUnitOfWork = {
    dom: container,
    props:{
      children:[el],
    }
  }
}

function PerformUnitOfWork(fiber) {
  // 为元素创建节点并添加到dom
  if(!fiber.dom) {
    fiber.dom = CreateDom(fiber)
  }
  if(fiber.parent) { 
    fiber.parent.dom.appendChild(fiber.dom)
  }

  // 为元素的子代创建fiber
  const els = fiber.props.children;
  let index = 0;
  let prevSibling = null;
  while(index < els.length) {
    const el = els[index];
    const newFiber = {
      type: el.type,
      props: el.props,
      parent: fiber,
      dom: null
    }

    // 子代在fiber树中的位置是child还是sibling，取决于它是否第一个
    if(index === 0){
      fiber.child = newFiber;
    } else {
      prevSibling.sibling = newFiber;
    }
    prevSibling = newFiber;
    index++;
  } 

  // 选择下一个执行工作单元，优先级是 child -> sibling -> parent
  if(fiber.child){
    return fiber.child;
  }
  let nextFiber = fiber;
  while(nextFiber) {
    if(nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

五、Render和Commit阶段

<span id="code2">

1、存在问题

  • 在performUnitOfWork函数里，每次为元素创建节点之后，都向dom添加一个新节点
  • 在渲染完整棵树之前，浏览器可能会中断，导致用户看不到完整的UI

2、解决方案

  • 将创建一个节点就向dom进行的添加处理更改为跟踪 fiber root，也被称为progress root 或者 wipRoot
  • 一旦完成所有的工作，即没有下一个工作单元时，才将fiber提交给dom
// 跟踪根节点
let wipRoot = null;
function Render(el,container) {
  wipRoot = {
    dom: container,
    props:{
      children:[el],
    }
  }
  nextUnitOfWork = wipRoot;
}

// 一旦完成所有的工作，将整个fiber提交给dom
function WorkLoop(deadline) {
  ...
  if(!nextUnitOfWork && wipRoot) {
    CommitRoot()
  }
  requestIdleCallback(WorkLoop)
}

// 将完整的fiber提交给dom
function CommitRoot() {
  CommitWork(wipRoot.child)
  wipRoot = null
}

// 递归将每个节点添加进去
function CommitWork(fiber) {
  if(!fiber) return;
  const parentDom = fiber.parent.dom;
  parentDom.appendChild(fiber.dom);
  CommitWork(fiber.child);
  CommitWork(fiber.sibling);
}

六、Reconciliation

  • 实现更新、删除功能，需要将render函数中收到的元素与提交给dom的最后的fiber tree进行比较
  • 因此，需要保存最后一次提交给fiber tree 的引用currentRoot
  • 同时，为每个fiber添加alternate属性，记录上一阶段提交的old fiber
let currentRoot = null;
function Render(el,container) {
  wipRoot = {
    ...
    alternate: currentRoot
  }
  ...
}

function CommitRoot() {
  ...
  currentRoot = wipRoot;
  wipRoot = null
}
  • 为元素的子代创建fiber的同时，将old fiber与new fiber进行reconcile
  • 通过以下三个维度进行比较 1、如果old fiber与new fiber具有相同的type，保留dom节点并更新其props，并设置标签effectTag为UPDATE 2、type不同，且为new fiber，意味着要创建新的dom节点，设置标签effectTag为PLACEMENT；若为old fiber，则需要删除节点，设置标签effectTag为DELETION

** 注意：为了更好的Reconciliation，React还使用了key，比如更快速的检测到子元素何时更改了在元素数组中的位置 **

let deletions = null;
function PerformUnitOfWork(fiber) {
  ...
  const els = fiber.props.children;
  // 提取 为元素的子代创建fiber 的代码
  ReconcileChildren(fiber, els);
}

function ReconcileChildren(wipFiber, els) {
  let index = 0;
  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
  let prevSibling = null;
  // 为元素的子代创建fiber 的同时 遍历旧的fiber的子级
  // undefined != null; // false
  // undefined !== null; // true
  while(index < els.length || oldFiber != null) {
    const el = els[index];
    const sameType = oldFiber && el && el.type === oldFiber.type;
    let newFiber = null;

    // 更新节点
    if(sameType) {
      newFiber = {
        type: el.type,
        props: el.props,
        parent: wipFiber,
        dom: oldFiber.dom, // 使用 oldFiber
        alternate: oldFiber,
        effectTag: "UPDATE",
      }
    } 
    // 新增节点
    if(!sameType && el){
      newFiber = {
        type: el.type,
        props: el.props,
        parent: wipFiber,
        dom: null,        // dom 设置为null
        alternate: null,
        effectTag: "PLACEMENT",
      }
    }
    // 删除节点
    if(!sameType && oldFiber) {
      // 删除节点没有新的fiber，因此将标签设置在旧的fiber上，并加入删除队列 [commit阶段提交时，执行deletions队列，render阶段执行完清空deletions队列]
      oldFiber.effectTag = "DELETION";
      deletions.push(oldFiber)
    }

    if(oldFiber) {
      oldFiber = oldFiber.sibling;
    }

    if(index === 0) {
      wipFiber.child = newFiber;
    } else if(el) {
      prevSibling.sibling = newFiber;
    }
    prevSibling = newFiber;
    index++;
  }
}
  • 在CommitWork函数里，根据effectTags进行节点处理 1、PLACEMENT - 跟之前一样，将dom节点添加进父节点 2、DELETION - 删除节点 3、UPDATE - 更新dom节点的props
function CommitWork(fiber) {
  if (!fiber) return;
  const parentDom = fiber.parent.dom;
  if (fiber.effectTags === 'PLACEMENT' && fiber.dom !== null){
    parentDom.appendChild(fiber.dom);
  } else if (fiber.effectTags === 'DELETION') {
    parentDom.removeChild(fiber.dom)
  } else if(fiber.effectTags === 'UPDATE' && fiber.dom !== null) {
    UpdateDom(
      fiber.dom,
      fiber.alternate.props,
      fiber.props
    )
  }
  
  CommitWork(fiber.child);
  CommitWork(fiber.sibling);
}

重点分析一下UpdateDom函数：

  • 普通属性 1、删除旧的属性 2、设置新的或更改的属性
  • 特殊处理以 on为前缀的事件属性 1、删除旧的或更改的事件属性 2、添加新的事件属性
const isEvent = key => key.startsWith("on");
const isProperty = key => key !== 'children' && !isEvent(key);
const isNew = (prev, next) => key => prev[key] !== next[key];
const isGone = (prev, next) => key => !(key in next);

/**
 * 更新dom节点的props
 * @param {object} dom    
 * @param {object} prevProps   之前的属性
 * @param {object} nextProps   当前的属性
 */ 
function UpdateDom(dom, prevProps, nextProps) {
  // 删除旧的属性
  Object.keys(prevProps)
    .filter(isProperty)
    .filter(isGone(prevProps, nextProps))
    .forEach(name => {
      dom[name] = ""
    })
​
  // 设置新的或更改的属性
  Object.keys(nextProps)
    .filter(isProperty)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      dom[name] = nextProps[name]
    })
  
  // 删除旧的或更改的事件属性
  Object.keys(prevProps)
    .filter(isEvent)
    .filter(key => (!(key in nextProps) || isNew(prevProps, nextProps)(key)))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2)
      dom.removeEventListener(
        eventType,
        prevProps[name]
      )
    })

  // 添加新的事件属性
  Object.keys(nextProps)
    .filter(isEvent)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2)
      dom.addEventListener(
        eventType,
        nextProps[name]
      )
    })
}

执行一下demo，看看效果呐！

七、Function Components

function App(props) {
  return <h1>Hi {props.name}</h1>
}
const element = <App name="foo" />

等价于

function App(props) {
  return Huamu.CreateElement("h1",null,"Hi ",props.name)
}
const element = Huamu.CreateElement(App, {name:"foo"})

1、Function Components相对于其他type的不同点：

  • Function Components的fiber没有dom节点
  • children来自于函数的运行而不是props

2、实现

  • 检测fiber类型，并依据此划分 UpdateFunctionComponent 和 UpdateHostComponent 进行处理
function PerformUnitOfWork(fiber) {
  const isFunctionComponent = fiber.type instanceof Function;
  if(isFunctionComponent) {
    UpdateFunctionComponent(fiber)
  } else {
    UpdateHostComponent(fiber)
  }
  // 选择下一个执行工作单元，优先级是 child -> sibling -> parent
  ...
}

function UpdateFunctionComponent(fiber) {
  // TODO
}
​
function UpdateHostComponent(fiber) {
  if (!fiber.dom) = fiber.dom = CreateDom(fiber);
  const els = fiber.props.children;
  ReconcileChildren(fiber, els);
}
  • children来自于函数的运行而不是props，即运行函数获取children
function UpdateFunctionComponent(fiber) {
  const children = [fiber.type(fiber.props)];
  ReconcileChildren(fiber,children);
}
  • 没有dom节点的fiber 1、在添加节点时，得沿着fiber树向上移动，直到找到带有dom节点的父级fiber 2、在删除节点时，得继续向下移动，直到找到带有dom节点的子级fiber
function CommitWork(fiber) {
  if (!fiber) return;
  // 优化：const domParent = fiber.parent.dom;
  let domParentFiber = fiber.parent;
  while(!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.dom;
  if (fiber.effectTags === 'PLACEMENT' && fiber.dom!=null){
    domParent.appendChild(fiber.dom);
  } else if (fiber.effectTags === 'DELETION') {
    // 优化： domParent.removeChild(fiber.dom)
    CommitDeletion(fiber, domParent)
  } else if(fiber.effectTags === 'UPDATE' && fiber.dom!=null) {
    UpdateDom(
      fiber.dom,
      fiber.alternate.props,
      fiber.props
    )
  }
  
  CommitWork(fiber.child);
  CommitWork(fiber.sibling);
}

function CommitDeletion(fiber,domParent){
  if(fiber.dom){
    domParent.removeChild(fiber.dom)
  } else {
    CommitDeletion(fiber.child, domParent)
  }
}

八、Hooks

  • 为Function Components添加状态 1、向fiber添加一个hooks数组，以支持useState在同一组件中多次调用，且跟踪当前的hooks索引
let wipFiber = null
let hookIndex = null

function UpdateFunctionComponent(fiber) {
  wipFiber = fiber;
  hookIndex = 0
  wipFiber.hooks = []
  const children = [fiber.type(fiber.props)]
  ReconcileChildren(fiber, children)
}

  • 当Function Components组件调用UseState时，通过alternate属性检测fiber是否有old hook

  • 若有old hook，将状态从old hook复制到new hook，否则，初始化状态

  • 将new hook添加fiber，hook index递增，返回状态

function UseState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex]
  const hook = {
    state: oldHook ? oldHook.state : initial,
  }
​
  wipFiber.hooks.push(hook)
  hookIndex++
  return [hook.state]
}
  • UseState还需返回一个可更新状态的函数，因此，需要定义一个接收action的setState函数
  • 将action添加到队列中，再将队列添加到fiber
  • 在下一次渲染时，获取old hook的action队列，并代入new state逐一执行，以保证返回的状态是已更新的
  • 在setState函数中，执行跟Render函数类似的操作，将currentRoot设置为下一个工作单元，以便开始新的渲染
function UseState(initial) {
  ...
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: [],
  }
  const actions = oldHook ? oldHook.queue : []
  actions.forEach(action => {
    hook.state = action(hook.state)
  })
​  const setState = action => {
    hook.queue.push(action)
    wipRoot = {
      dom: currentRoot.dom,
      props: currentRoot.props,
      alternate: currentRoot,
    }
    nextUnitOfWork = wipRoot
    deletions = []
  }

  wipFiber.hooks.push(hook)
  hookIndex++
  return [hook.state, setState]
}

结：Babel使用自定义库

const HuaMu = {
  CreateElement,
  Render,
  UseState
}

/** @jsx HuaMu.CreateElement */
function Counter() {
  const [state, setState] = HuaMu.UseState(1)
  return (
    <h1 onClick={() => setState(c => c + 1)}>
      Count: {state}
    </h1>
  )
}
const element = <Counter />
const container = document.getElementById("root")
HuaMu.Render(element, container)

执行一下demo，看看效果呐！

不足

  • 在渲染阶段，遍历整棵树。React源码会跳过没有任何更改的子树
  • 在提交阶段，遍历整棵树。React源码仅保留有更新的fiber链表

完整代码

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://my.oschina.net/jill1231/blog/4771259

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

 Kafka 顺序消费线程模型的实践与优化

 Kafka 顺序消费线程模型的实践与优化

Kafka 顺序消费线程模型的实践与优化 各类消息中间件对顺序消息实现的做法是将具有顺序性的一类消息发往相同的主题分区中，只需要将这类消息设置相同的 Key 即可，而 Kafka 会在任意时刻保证一个消费组同时只能有一个消费者监听消费，因此可在消费时按分区进行顺序消费，保证每个分区的消息具备局部顺序性。由于需要确保分区消息的顺序性，并不能并发地消费消费，对消费的吞吐量会造成一定的影响。那么，如何在保证消息顺序性的前提下，最大限度的提高消费者的消费能力？ 本文将会对 Kafka 消费者拉取消息流程进行深度分析之后，对 Kafka 消费者顺序消费线程模型进行一次实践与优化。 Kafka 消费者拉取消息流程分析 在讲实现 Kafka 顺序消费线程模型之前，我们需要先深入分析 Kafka 消费者的消息拉取机制，只有当你对 Kafka 消费者拉取消息的整个流程有深入的了解之后，你才能够很好地理解本次线程模型改造的方案。 我先给大家模拟一下消息拉取的实际现象，这里 max.poll.records = 500。 1、消息没有堆积时： 可以发现，在消息没有堆积时，消费者拉取时，如果某个分区没有的消息...
2020-12-02
509
上一篇
更加优雅的Token认证方式JWT

更加优雅的Token认证方式JWT

基于Token的认证 通过上一篇你大体已经了解session和cookie认证了，session认证需要服务端做大量的工作来保证session信息的一致性以及session的存储，所以现代的web应用在认证的解决方案上更倾向于客户端方向，cookie认证是基于客户端方式的，但是cookie缺点也很明显，到底有哪些缺点可以跳转上一次的文章。那有没有一种比较折中的方案呢？有的 把认证信息保存在客户端，关键点就是安全的验证，如果能解决认证信息的安全性问题，完全可以把认证信息保存在客户端，服务端完全无认证状态，这样的话服务端扩展起来要方便很多。关于信息的安全解决方案，现在普遍的做法就是签名机制，像微信公众接口的验证方式就基于签名机制。 签名，就是只有信息的发送者才能产生的别人无法伪造的一段数字串，这段数字串同时也是对信息的发送者发送信息真实性的一个有效证明。 当用户成功登陆系统并成功验证有效之后，服务器会利用某种机制产生一个token字符串，这个token中可以包含很多信息，例如来源IP，过期时间，用户信息等， 把这个字符串下发给客户端，客户端在之后的每次请求中都携带着这个token，携带方式...
2020-12-02
635
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-03 大小: 211.28KB 下载: 53次
Apache Tomcat

Apache Tomcat

Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。

时间: 2025-12-03 大小: 10MB 下载: 35次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Docker SpringCloud SpringBoot Redis HarmonyOS NEXT K8s Nacos Jdk25 服务网格 ChatGPT DeepSeek

欢迎您！

登录后，您将获得更多功能！

热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273