build my React

本文是pomb的build your own React的读书笔记,其中参考了译文 读书笔记按照pomb大神中的步骤来划分, 为即将的React源码的学习做好准备.

Step1 JSX 是如何被解析的 (createElement)

JSX是JavaScript的语法扩展,其本质上是React.createElement的语法糖, 通过babel编译,JSX会转变成React.createElement.

这里我们简单实现一版createElement

function createElement(type, props, ...children) {
    return {
        // 类型
        type,
        // config配置
        props: {
            ...props,
            // 若是文本节点,单独创建
            children: children.map(child =>
                typeof child === 'object'
                    ? child
                    : createTextElement(child))
        }
    }
}
// 文本节点但是创建
function createTextElement(text) {
    return {
        type: 'TEXT_ELEMENT',
        props: {
            nodeValue: text,
            children: []
        }
    }
}
const element = (
    <div style="background: salmon">
        <h1>Hello World</h1>
        <h2 style="text-align:right">from React</h2>
    </div>
);
const container = document.getElementById("root");
ReactDOM.render(element, container);
// 这里调用 ReactDOM.render, 会发现已经开始渲染了

Step2 实现自己的render函数,渲染dom节点

// 承接step1
function render(element, container) {
    const dom = element.type === 'TEXT_ELEMENT'
        ? document.createTextNode('')
        : document.createElement(element.type)
    // 排除children属性
    const isProperty = key => key !== 'children'

    // 渲染属性
    Object.keys(element.props)
        .filter(isProperty)
        .forEach(name => {
            dom[name] = element.props[name]
        })
    // 递归将子组件都渲染到dom
    element.props.children.forEach(child => render(child, dom))
    // 将dom挂载在目标容器
    container.appendChild(dom)
}
// 接下来我们使用自己的createElement 和render函数来执行渲染
const Didact = {
    render,
    createElement
}
// 这句注释必须要写
/** @jsx Didact.createElement */
const element = (
    <div style="background: salmon">
        <h1>Hello World</h1>
        <h2 style="text-align:right">from Didact</h2>
    </div>
);
const container = document.getElementById("root");
Didact.render(element, container);

Step3 并发模式

截止到Step2 我们已经实现了一个最简易版本的React,但是有个问题,在Step2中的render函数,我们是递归来实现patch到Dom中的,如果元素树层级很深,会长时间占用浏览器进程,造成组件,影响浏览器更高优先级的事务处理,比如L用户的输入交互和ui渲染

一次,我们需要把这个大的任务 切割 为 多个小的 工作单元,这样的话,如果浏览器有更高优先级的事务处理,我们就可以中断react元素的渲染,这里我们引入一个概念,称他为 "并发模式"

我们使用 requestIdleCallback 来用作循环,来执行回调, 我们可以理解requestIdleCallback是一个setTimeout,浏览器会在主线程空闲时运行回调,而不是告诉我们何时去运行.

requestIdleCallback还为我们提供了截止日期参数。我们可以使用它来检查浏览器需要再次控制之前有多少时间。

React 已经不再使用requestIdleCallback,但是现在版本的scheduler包 在概念是是相同的,(这里还等待学习)

// 下一个工作单元
let nextUnitOfWork = null

// workloop
function workloop(deadline) {
    // 是否需要暂停
    let shouldYield = false
    while(nextUnitOfWork && !shouldYield) {
        // 不需要暂停
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
        shouldYield = deadline.timeRemaining() < 1
    }
    requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)

// 执行下一个单元函数
function performUnitOfWork(nextUnitOfWork) {
    // todo
}

Step4 Fiber

比如我们想渲染一个这样的元素树,其fiber结构对应下图fiber结构

Didact.render(
  <div>
    <h1>
      <p />
      <a />
    </h1>
    <h2 />
  </div>,
  container
)

为了组织工作单元,我们需要一个数据结构, 如上图 是一个fiber树,每个元素都会一个fiber结构,每个fiber都是一个工作单元(unitOfwork)

每一条fiber 只会连接他的第一个子元素作为child, 其他的都会作为第一个子元素的兄弟(sibling)

如果fiber没有child,则将sibling用作下一个工作单元,比如: p元素没有子结点(child),我们会在p完成后,将a元素作为下一个工作单元

如果fiber既没有child也没有sibling,比如a,和h2,会返回到parent,以此类推,知道返回到root

接下来我们重构下render函数,将创建dom的操作提取

// 创建dom, 将step2中render函数的创建dom的逻辑提取
function createDom(fiber) {
    const dom = fiber.type === 'TEXT_ELEMENT'
    ? document.createTextNode('')
    : document.createElement(fiber.type)
// 排除children属性
const isProperty = key => key !== 'children'

// 渲染属性
Object.keys(fiber.props)
    .filter(isProperty)
    .forEach(name => {
        dom[name] = fiber.props[name]
    })
    return dom
}

// 此时的render函数
function render(element, container) {
    // 第一个执行单元是根结点
   nextUnitOfWork = {
       dom: container,
       props: {
           children: [element]
       }
   }
}

实现performUnitOfWork函数 performUnitOfWork函数做了三件事:

• 把元素添加到dom中
• 为元素子元素创建一个fiber结构
• 找到下一个工作单元

// 执行下一个单元函数
function performUnitOfWork(fiber) {
    // todo add dom node
    if (!fiber.dom) {
        fiber.dom = createDom(fiber)
    }
    if (fiber.parent) {
        fiber.parent.dom.appendChild(fiber.dom)
    }
    // todo create new Fibers
    const elements = fiber.props.children
    let index = 0
    // 保存上一个sibling(child是其sibling的sibling.你是你哥的兄弟)
    let prevSibling = null
    while (index < elements.length) {
        const element = elements[index]
        const newFiber = {
            type: element.type,
            props: element.props,
            parent: fiber,
            dom: null
        }
        if (index === 0) {
            // child
            fiber.child = newFiber
        } else {
            prevSibling.prevSibling = newFiber
        }
        prevSibling = newFiber
        index++
    }
    // todo return next unit of workunit
    if(fiber.child) {
        return fiber.child
    }
    let nextFiber = fiber
    while(nextFiber) {
        if(nextFiber.sibling) {
            return nextFiber.sibling
        }
        // 直到找到rootFiber
        nextFiber = nextFiber.parent
    }
}

Step5 render 和commit阶段做了什么

在Step4的performUnitOfWork中, fiber.parent.dom.appendChild(fiber.dom)每次都会把元素直接添加到dom中,这里会有个问题,就是浏览器随时有可能中断我们的操作,这里会呈给用户一个 不完整的UI. 所以我们需要作出改动, 即: 所有单元执行后. 一并进行所有的dom添加

performUnitOfWork中移除添加dom的操作

  - if (fiber.parent) {
  -     fiber.parent.dom.appendChild(fiber.dom)
  - }

创建wipRoot,修改render函数

// 进行中的 根结点(work in progress root)
let wipRoot = null
...
function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
  }
  nextUnitOfWork = wipRoot
}

创建commitRoot函数,修改workloop,当所有单元执行完成后,调用添加所有dom

// root提交
// root提交
function commitRoot() {
    // todo add nodes to dom
    commitWork(wipRoot.child)
    wipRoot = null

}
function commitWork(fiber) {
    if(!fiber) {
        return
    }
    const domParent = fiber.parent.dom
    domParent.appendChild(fiber.dom)
    commitWork(fiber.child)
    commitWork(fiber.sibling)
}
function workLoop(deadline) {
    // 是否需要暂停
    let shouldYield = false
    while (nextUnitOfWork && !shouldYield) {
        // 执行 一个工作单元并返回下一个工作单元
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
        // 判断空间时间是否足够
        shouldYield = deadline.timeRemaining() < 1
    }
    // 所有工作单元都执行完成后,我们一并进行提交操作
    // commitRoot里进行所有元素 往dom 树上添加的动作
    if (!nextUnitOfWork && wipRoot) {
        commitRoot()
    }
    requestIdleCallback(workLoop)
}

Step6 Reconciliation 协调阶段

目前为止,我们只完成了添加dom,还需要完成update和delete操作, 我们需要将render函数接收到的元素与提交给DOM的最后一个fiber树进行比较.

因此，在完成提交之后，我们需要保存对“最后一个提交到DOM的fiber树”的引用。我们称之为currentRoot,同时,我们也需要给每一个fiber结构添加alternate属性,该属性的值是旧fiber的引用,即我们在上一个提交阶段提交给dom的fiber

创建currentRoot,添加alternate属性

// 下一个工作单元
let nextUnitOfWork = null
// 进行中的 根结点(work in progress root)
let wipRoot = null
// 当前fiberRoot
+ let currentRoot = null
// workloop
function workloop(deadline) {...}

// render函数添加alternate
// Step2 实现render函数
function render(element, container) {
    // 第一个执行单元是根结点
    wipRoot = {
        dom: container,
        props: {
            children: [element]
        },
      +  alternate: currentRoot
    }
    nextUnitOfWork = wipRoot
}

协调阶段比较规则如下:

• 新旧fiber元素的类型相同,保留DOM节点,更新属性
• 类型不同,且有一个新fiber的元素,执行添加DOM节点
• 类型不同,且有一个旧的fiber元素,则移除旧节点 我们先给不同情况下的节点打上tag,effectTag,我们会在提交阶段使用

function performUnitOfWork(fiber) {
    if (!fiber.dom) {
        fiber.dom = createDom(fiber)
    }
    const elements = fiber.props.children
    // 协调,比较新旧fiber
    reconcileChildren(fiber, elements)
    if (fiber.child) {
        return fiber.child
    }
    let nextFiber = fiber
    while (nextFiber) {
        if (nextFiber.sibling) {
            return nextFiber.sibling
        }
        nextFiber = nextFiber.parent
    }
}
// 协调函数
function reconcileChildren(wipFiber, elements) {
    let index = 0
    // 从alternate中获取旧的child fiber
    let oldFiber =
        wipFiber.alternate && wipFiber.alternate.child
     // 上一个fiber
    let prevSibling = null
    while (
        index < elements.length ||
        oldFiber != null
    ) {
        const element = elements[index]
        let newFiber = null
        const sameType =
            oldFiber &&
            element &&
            element.type == oldFiber.type
		// 新旧fiber元素的类型相同,保留DOM节点,更新属性
        if (sameType) {
            newFiber = {
                type: oldFiber.type,
                props: element.props,
                dom: oldFiber.dom,
                parent: wipFiber,
                alternate: oldFiber,
                effectTag: "UPDATE",
            }
        }
        // 类型不同, 有新元素,添加
        if (element && !sameType) {
            newFiber = {
                type: element.type,
                props: element.props,
                dom: null,
                parent: wipFiber,
                alternate: null,
                effectTag: "PLACEMENT",
            }
        }
        // 类型不同,有旧元素,删除
        if (oldFiber && !sameType) {
            oldFiber.effectTag = "DELETION"
            deletions.push(oldFiber)
        }
        // 比较结束,还需比较sibling
        if (oldFiber) {
            oldFiber = oldFiber.sibling
        }
        if (index === 0) {
        	// 第一个节点作为child
            wipFiber.child = newFiber
        } else if (element) {
        	// 其余作为sibling
            prevSibling.sibling = newFiber
        }
        prevSibling = newFiber
        index++
    }
}

在提交阶段,我们根据这些effectTag执行不同处理

// root提交
function commitRoot() {
    // 删除收集的节点
    deletions.forEach(commitWork)
    commitWork(wipRoot.child)
    currentRoot = wipRoot
    wipRoot = null
}
function commitWork(fiber) {
    if (!fiber) {
        return
    }

    const domParent = fiber.parent.dom
    if (
        fiber.effectTag === "PLACEMENT" &&
        fiber.dom != null
    ) {
        domParent.appendChild(fiber.dom)
    } else if (
        fiber.effectTag === "UPDATE" &&
        fiber.dom != null
    ) {
        updateDom(
            fiber.dom,
            fiber.alternate.props,
            fiber.props
        )
    } else if (fiber.effectTag === "DELETION") {
        domParent.removeChild(fiber.dom)
    }

    commitWork(fiber.child)
    commitWork(fiber.sibling)
}

对应的updateDom

// 创建dom, 将step2中render函数的创建dom的逻辑提取
function createDom(fiber) {
    const dom =
        fiber.type == "TEXT_ELEMENT"
            ? document.createTextNode("")
            : document.createElement(fiber.type)

    updateDom(dom, {}, fiber.props)

    return dom
}
// 是否是事件
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
function updateDom(dom, prevProps, nextProps) {
    //Remove old or changed event listeners
    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]
            )
        })

    // Remove old properties
    Object.keys(prevProps)
        .filter(isProperty)
        .filter(isGone(prevProps, nextProps))
        .forEach(name => {
            dom[name] = ""
        })

    // Set new or changed properties
    Object.keys(nextProps)
        .filter(isProperty)
        .filter(isNew(prevProps, nextProps))
        .forEach(name => {
            dom[name] = nextProps[name]
        })

    // Add event listeners
    Object.keys(nextProps)
        .filter(isEvent)
        .filter(isNew(prevProps, nextProps))
        .forEach(name => {
            const eventType = name
                .toLowerCase()
                .substring(2)
            dom.addEventListener(
                eventType,
                nextProps[name]
            )
        })
}

截止到此,可以查看pomb的代码codesandbox

函数组件

function App(props) {
  return <h1>Hi {props.name}</h1>
}
const element = <App name="foo" />
const container = document.getElementById("root")
Didact.render(element, container)

函数组件和普通的element有和不同?

• 来自函数组件App的fiber没有dom节点(不存在App dom节点)
• 函数组件的children属性不在props中而是其返回值 我们根据fiber的type属性是否是funciton,来分别执行更新函数

// 执行下一个单元函数
function performUnitOfWork(fiber) {
    const isFunctionComponent = fiber.type instanceof Function
    if (isFunctionComponent) {
        updateFunctionComponent(fiber)
    } else {
        updateHostComponent(fiber)
    }
    if (fiber.child) {
        return fiber.child
    }
    let nextFiber = fiber
    while (nextFiber) {
        if (nextFiber.sibling) {
            return nextFiber.sibling
        }
        nextFiber = nextFiber.parent
    }
}

function updateHostComponent(fiber) {
    if (!fiber.dom) {
        fiber.dom = createDom(fiber)
    }

    const elements = fiber.props.children
    reconcileChildren(fiber, elements)
}
function updateFunctionComponent(fiber) {
    // 函数组件的fiber 的type是个函数,执行可以到得其返回值,也就是children
    const children = [fiber.type(fiber.props)]
    reconcileChildren(fiber, children)
}

在提交阶段,我们也需要作出改变

function commitWork(fiber) {
    if (!fiber) {
        return
    }
    // 若是函数组件 是没dom的,需要往上寻找dom
   + let domParentFiber = fiber.parent
   + while (!domParentFiber.dom) {
   +     domParentFiber = domParentFiber.parent
   + }
   + const domParent = domParentFiber.dom
    if (
        fiber.effectTag === "PLACEMENT" &&
        fiber.dom != null
    ) {
        domParent.appendChild(fiber.dom)
    } else if (
        fiber.effectTag === "UPDATE" &&
        fiber.dom != null
    ) {
        updateDom(
            fiber.dom,
            fiber.alternate.props,
            fiber.props
        )
    } else if (fiber.effectTag === "DELETION") {
      +  commitDeletion(fiber, domParent)
    }

    commitWork(fiber.child)
    commitWork(fiber.sibling)
}
function commitDeletion(fiber, domParent) {
    if (fiber.dom) {
        domParent.removeChild(fiber.dom)
    } else {
        // 类似 const App =() =>{}的函数组件,App没有dom的,需要找到其返回值(child),执行删除
        commitDeletion(fiber.child, domParent)
    }
}

Step8 Hooks

实现一版简易的useState 首先做一些初始化操作

// 函数组件正在执行的fiber
let wipFiber = null
// hooks索引
let hookIndex = null

function updateFunctionComponent(fiber) {
// 当是函数组件时,存储fiber
    wipFiber = fiber
    hookIndex = 0
    // 添加hooks数组,以便函数组件多次调用hook,追踪hook索引
    wipFiber.hooks = []
    // 函数组件的fiber 的type是个函数,执行可以到得其返回值,也就是children
    const children = [fiber.type(fiber.props)]
    reconcileChildren(fiber, children)
}

实现useState

function useState(initial) {
    // 1.当函数组件调用useState时,我们检查是否有旧的钩子,使用hook索引
    // 在alternate中检查,存在旧的hook,从旧的hook中copy state到新的hook
    // 否则 初始化state 
    const oldHook =
        wipFiber.alternate &&
        wipFiber.alternate.hooks &&
        wipFiber.alternate.hooks[hookIndex]
    const hook = {
        state: oldHook ? oldHook.state : initial,
        // 更新函数队列 setState
        queue: []
    }
    const actions = oldHook ? oldHook.queue : []
    actions.forEach(action => {
        hook.state = action(hook.state)
    })
    // 2. 定义setState, 接收一个action
    const setState = action => {
        hook.queue.push(action)
        // 设置一个新的wipRoot,并且作为下一个执行单元,这样可以开启一个新的渲染阶段
        wipRoot = {
            dom: currentRoot.dom,
            props: currentRoot.props,
            alternate: currentRoot
        }
        nextUnitOfWork = wipRoot
        deletions = []
    }
    // 2. 将新的hook添加到fiber,hook索引++, 返回state
    wipFiber.hooks.push(hook)
    hookIndex++
    return [hook.state, setState]
}

总结

只是简易版本的react,熟悉原理使用,要想做到真正的懂react,还需要去阅读学习源码,这是前端绕不开的,所以,加油吧,打工人!

本文涉及的源码 build your own React