将一个jsx的多叉树转为Fiber树

前言

在React中会将我们写的组件转为jsx的多叉树,最后转为fiber树,他是如何转化的呢,今天我们一起探索下吧。

jsx多叉树

一个简单的jsx对象有如下属性:

go 复制代码
const jsx = {
    type:'div',
    key: 1,
}
// 其余的属性我们省略掉,暂时用不到

fiber

一个fiber对象的简单属性有以下5个:

kotlin 复制代码
const fiber = {  
    type: 'div', // 节点的类型 
    key: 1, 
    child: null,        // 子Fiber节点  
    sibling: null,     // 兄弟Fiber节点  
    return: null,      // 父Fiber节点(在递归过程中设置)  
 }; 

实现

有如下一个jsx的多叉树,我们需要转为图二的fiber

  • 图一,
  • 图二
  • 第一步:我们首先传入jsx根节点,创建出根节点对应的fiber
  • 第二步:我们判断jsx根节点有没有children,如果有,那么我们遍历递归创建childFiber
    • 当创建好childFiber后,我们需要将childFiber.return指向其父fiber节点,
    • 其次我们还需要判断childFiber是不是第一个子节点,如果是设置fiber.child = childFiber;
    • 如果不是第一个子节点,我们需要在遍历创建之前记录子节点的最后一个节点lastChildFiber,然后让lastChildFiber.siblings指向新创建的childFiber
javascript 复制代码
const createFiber = (jsxNode) => {
    // 创建Fiber节点
    const fiber = {
        type: jsxNode.type, // JSX节点的类型
        key: jsxNode.key,
        child: null,        // 子Fiber节点
        return: null,       // 兄弟Fiber节点
        siblings: null,     // 父Fiber节点(在递归过程中设置)  
    }
    
    // 如果JSX节点有子节点,递归创建Fiber子树 
    if(jsxNode.children && jsxNode.children.length > 0) {
        let lastChildFiber = null;
        for(let i = 0; i < jsxNode.children.length; i++){
            const childFiber = createFiber(jsxNode.children[i])
            
            // 设置子Fiber节点的return属性指向当前Fiber节点  
            childFiber.return = fiber;
            
            // 如果是第一个子节点,则设置为child属性  
            if(!fiber.child) {
                fiber.child = childFiber
            } else {
            // 否则,将其设置为上一个子节点的sibling属性  
                lastChildFiber.next = childFiber
            }
            // 更新最后一个子节点的引用  
            lastChildFiber = childFiber
        }
    }
    
    return fiber
}
  • 上面这样,我们就实现了一个简单的将jsx树转为fiber树的算法。
  • 后面我们会在此基础上实现react diff,以及可中断的diff.
相关推荐
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端