[译]Build your own react

MindMap

1. 第一步：createElement函数

2. 第二步：render函数

3. 第三步：Concurrent Mode

4. 第四步：Fibers

5. 第五步：Render 与 Commit 两大阶段（Phases）

6. 第六步：调和算法 Reconciliation

7. 第七步：函数组件 Function Components

8. 第八步：Hooks

Step Zero: 回顾

const element = <h1 title="foo">Hello</h1>
const container = document.getElementById("root")
ReactDOM.render(element, container)

• 第一行：定义了一个 React element。

• 第二行：从 DOM 中获取了一个 DOM node。

• 第三行：将 React element 渲染到 DOM node 上。

const element = React.createElement(
  "h1",
  { title: "foo" },
  "Hello"
)

const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "Hello",
  },
}

const node = document.createElement(element.type)
node["title"] = element.props.title

const text = document.createTextNode("")
text["nodeValue"] = element.props.children

node.appendChild(text)
container.appendChild(node)

const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "Hello",
  },
}

const container = document.getElementById("root")

const node = document.createElement(element.type)
node["title"] = element.props.title

const text = document.createTextNode("")
text["nodeValue"] = element.props.children

node.appendChild(text)
container.appendChild(node)

Step I: createElement

const element = (
  <div id="foo">
    <a>bar</a>
    <b />
  </div>
)
const container = document.getElementById("root")
ReactDOM.render(element, container)

JSX ⇒ JS

const element = React.createElement(
  "div",
  { id: "foo" },
  React.createElement("a", null, "bar"),
  React.createElement("b")
);

children 的处理

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children,
    },
  }
}

{
  "type": "div",
  "props": { "children": [] }
}

{
  "type": "div",
  "props": { "children": [a] }
}

{
  "type": "div",
  "props": { "children": [a, b] }
}

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_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  }
}

const Didact = {
  createElement,
}

const element = Didact.createElement(
  "div",
  { id: "foo" },
  Didact.createElement("a", null, "bar"),
  Didact.createElement("b")
)

/** @jsx Didact.createElement */
const element = (
  <div id="foo">
    <a>bar</a>
    <b />
  </div>
)

Step II: render

创建 DOM node

function render(element, container) {
	// TODO create dom nodes
}

const Didact = {
  createElement,
	render,
}

function render(element, container) {
  const dom = document.createElement(element.type)

  container.appendChild(dom)
}

function render(element, container) {
  const dom = document.createElement(element.type)

	element.props.children.forEach(child =>
    render(child, dom)
  )

  container.appendChild(dom)
}

function render(element, container) {
	const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type)

	element.props.children.forEach(child =>
    render(child, dom)
  )

  container.appendChild(dom)
}

function render(element, container) {
	const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type)

	const isProperty = key => key !== "children"
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name]
    })

	element.props.children.forEach(child =>
    render(child, dom)
  )

  container.appendChild(dom)
}

Step III: Concurrent Mode

element.props.children.forEach(child =>
  render(child, dom)
)

// element.props.children.forEach(child =>
//  render(child, dom)
// )

let nextUnitOfWork = null

function workLoop(deadline) {
  let shouldYield = false
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
      nextUnitOfWork
    )
    shouldYield = deadline.timeRemaining() < 1
  }
  requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

function performUnitOfWork(nextUnitOfWork) {
  // TODO
}

while (nextUnitOfWork) {    
  nextUnitOfWork = performUnitOfWork(   
    nextUnitOfWork  
  ) 
}

Step IV: Fibers

Fiber 的执行

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

1. 将 element 添加至 DOM

2. 为 element 的 children 创建 fiber

3. 选出下一个工作单元

1. 首先我们删除 render 函数中的原有代码。将创建 DOM node 的部分代码抽离处理，稍后进行填充：

function createDom(fiber) {
  const dom =
    fiber.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(fiber.type)

  const isProperty = key => key !== "children"
  Object.keys(fiber.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = fiber.props[name]
    })

  return dom
}

function render(element, container) {
  // TODO set next unit of work
}

let nextUnitOfWork = null

2. 在 render 函数中，我们将 nextUnitOfWork 设置为 Fiber Tree 的根节点：

function render(element, container) {
  nextUnitOfWork = {
    dom: container,
    props: {
      children: [element],
    },
  }
}

let nextUnitOfWork = null

3. 接下来，当浏览器准备好的时候，它将会调用我们的 workLoop 函数，从根节点开始执行 performUnitOfWork 。

function workLoop(deadline) {
  let shouldYield = false
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
      nextUnitOfWork
    )
    shouldYield = deadline.timeRemaining() < 1
  }
  requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

function performUnitOfWork(fiber) {
  // TODO add dom node
  // TODO create new fibers
  // TODO return next unit of work
}

4. 首先，我们创建一个 node 节点然后将其添加至 DOM，将这个 DOM node 保存在 fiber.dom 属性中以持续跟踪。

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

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

  // TODO create new fibers
  // TODO return next unit of work
}

5. 接着，为每一个chid创建一个新的 fiber

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

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

	const elements = fiber.props.children
  let index = 0
  let prevSibling = null
	
  while (index < elements.length) {
    const element = elements[index]

    const newFiber = {
      type: element.type,
      props: element.props,
      parent: fiber,
      dom: null,
    }
  }
  // TODO return next unit of work
}

6. 将其添加到 Fiber Tree 中，它是 child 还是 sibling ，取决于它是否是第一个 child。

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

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

	const elements = fiber.props.children
  let index = 0
  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) {
      fiber.child = newFiber
    } else {
      prevSibling.sibling = newFiber
    }

    prevSibling = newFiber
    index++
  }
  // TODO return next unit of work
}

7. 最后，我们选出下一个工作单元。首先寻找 child ,其次 sibling ,然后是 uncle （ parent 的 sibling）。

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

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

  const elements = fiber.props.children
  let index = 0
  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) {
      fiber.child = newFiber
    } else {
      prevSibling.sibling = newFiber
    }

    prevSibling = newFiber
    index++
  }

  if (fiber.child) {
    return fiber.child
  }
  let nextFiber = fiber
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling
    }
    nextFiber = nextFiber.parent
  }
}

以上就是我们的 performUnitOfWork 函数。

Step V: Render and Commit Phases

💡
将「添加节点至 DOM」这个动作延迟至所有节点 render 完成。这个动作也被称为 commit。

为什么要分阶段

现在我们又有另一个问题。
每当我们在处理一个 React element 时，我们都会添加一个新的节点到 DOM 中，而浏览器在渲染完成整个树之前可能会中断我们的工作。在这种情况下，用户将会看不到完整的 UI。

如何分阶段

所以我们需要删除那部分对 DOM 进行修改的代码：

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

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

相反地，我们会跟踪 Fiber Tree 的根节点。我们称它为「进行中的 root」—— wipRoot。

function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
  }
  nextUnitOfWork = wipRoot
}

let nextUnitOfWork = null
let wipRoot = null

一旦完成所有工作（直到没有 nextUnitOfWork ），我们便将整个 Fiber Tree 交给 DOM。

function commitRoot() {
  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 render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
  }
  nextUnitOfWork = wipRoot
}

let nextUnitOfWork = null
let wipRoot = null

function workLoop(deadline) {
  let shouldYield = false
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
      nextUnitOfWork
    )
    shouldYield = deadline.timeRemaining() < 1
  }

  if (!nextUnitOfWork && wipRoot) {
    commitRoot()
  }

  requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

我们将这个步骤在 commitRoot 函数中完成。在这里我们将所有节点递归附加到 DOM 中。

Step VI: Reconciliation

💡
更新和删除节点的过程：调和 Reconciliation
目前我们只做了「添加节点至 DOM」这个动作，那么更新或删除节点是怎么实现的呢？
这就是我们现在要做的，我们需要将在 render 函数上接收到的 elements 与我们提交给 DOM 的最后一棵 Fiber Tree 进行比较。

保存当前渲染的 Fiber Tree

因此，在完成 commit 之后，我们需要对「最后一次 commit 到 DOM 的一棵 Fiber Tree」 的引用进行保存。我们称它为 currentRoot 。同时我们也对每个 Fiber 添加了一个 alternate 属性。这个属性是对旧 Fiber 的链接，这个旧 Fiber 是我们在在上一个 commit phase 向 DOM commit 的 Fiber。

function commitRoot() {
  commitWork(wipRoot.child)
	// currentRoot: 最后一次 commit 到 DOM 的一棵 Fiber Tree
  currentRoot = wipRoot
  wipRoot = null
}

function commitWork(fiber) {
  if (!fiber) {
    return
  }
  const domParent = fiber.parent.dom
  domParent.appendChild(fiber.dom)
  commitWork(fiber.child)
  commitWork(fiber.sibling)
}

function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
    alternate: currentRoot,
  }
  nextUnitOfWork = wipRoot
}

let nextUnitOfWork = null
let currentRoot = null
let wipRoot = null

 

Reconcile

Reconcile 的过程会在执行工作单元时完成。
现在我们把 performUnitOfWork 中用来创建新 Fiber 的部分代码抽离成一个新的 reconcileChildren 函数。

function reconcileChildren(wipFiber, elements) {
  let index = 0
  let prevSibling = null

  while (index < elements.length) {
    const element = elements[index]

    const newFiber = {
      type: element.type,
      props: element.props,
      parent: wipFiber,
      dom: null,
    }

    if (index === 0) {
      wipFiber.child = newFiber
    } else {
      prevSibling.sibling = newFiber
    }

    prevSibling = newFiber
    index++
  }
}

在这里我们将会旧 Fibers 与新 elements进行调和（reconcile）：

function reconcileChildren(wipFiber, elements) {
  let index = 0
  let oldFiber =
    wipFiber.alternate && wipFiber.alternate.child
  let prevSibling = null

  while (
    index < elements.length ||
    oldFiber != null
  ) {
    const element = elements[index]
    let newFiber = null

    // TODO compare oldFiber to element
		....
	}
}

 
我们使用 type 属性对它们进行比较：
• 如果老的 Fiber 和新的 element 拥有相同的 type，我们可以保留 DOM 节点并仅使用新的 Props 进行更新。这里我们会创建一个新的 Fiber 来使 DOM 节点与旧的 Fiber 保持一致，而props 与新的 element 保持一致。
• 我们还向 Fiber 中添加了一个新的属性 effectTag ，这里的值为 UPDATE 。为稍后我们将在 commit 阶段使用这个属性。
• 如果两者的 type 不一样并且有一个新的 element，这意味着我们需要创建一个新的 DOM 节点。
• 在这种情况下，我们会用 PLACEMENT effect tag 来标记新的 Fiber。
• 如果两者的 type 不一样，并且有一个旧的 Fiber，我们需要删除旧节点。
• 在这种情况下，我们没有新的 Fiber，所以我们会把 DELETIONeffect tag 添加到旧 Fiber 中。

// 对于新旧 element 的处理
const sameType =
      oldFiber &&
      element &&
      element.type == oldFiber.type

    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) // 这里使用了一个数组来追踪我们想要删除的 node
    }

在这里 React 使用了 keys ，这样可以更好地实现 reconciliation 。例如，它会检测 children 何时更改 element 数组中的位置。
 

变更 commitWork 以处理不同类型的变化

接下来，当我们要 commit 这些变更到 DOM 时，我们就会用到 deletions 这个数组中的 fibers。

function commitRoot() {
  deletions.forEach(commitWork)
  commitWork(wipRoot.child)
  currentRoot = wipRoot
  wipRoot = null
}

 
为了处理前面定义的各种 effectTags，我们也需要对 commitWork 函数进行变更：

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)
}

• PLACEMENT ：这个 DOM 节点添加到父 Fiber 的节点上
• DELETION：删除这个 child
• UPDATE ：使用最新的 props 来更新现有的 DOM 节点
• 这部分动作将有 updateDOM 函数来完成：我们将旧 Fiber 的props 与 新 Fiber 的 props 可进行比较，删除旧的 props，并设置新的或者变更之后的 props。
• 针对 event listener 这种特殊的 prop，我们将以不同的方式处理：如果 event listener 发生了变更我们会把它从 node 中移除，然后设置一个新的 event listener。

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]
      )
    })
}

 
在 codesandbox 上可以试用带有 Reconciliation 的最新版本。`

Step VII: Function Components

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

1. 来自 Function Component 的 Fiber 并没有 DOM node

2. children 从运行函数中而来，而非直接从 props 中获取

Function Component 的判断

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 updateFunctionComponent(fiber) {
  // TODO
}

function updateHostComponent(fiber) {
  if (!fiber.dom) {
    fiber.dom = createDom(fiber)
  }
  reconcileChildren(fiber, fiber.props.children)
}

function updateFunctionComponent(fiber) {
  const children = [fiber.type(fiber.props)]
  reconcileChildren(fiber, children)
}

Commit 时需要寻找 DOM node

1. 修改寻找 DOM 父节点的逻辑：顺着 Fiber Tree 向上找直到找到有 DOM node 的 Fiber。

2. 当删除节点是，我们也需要向下寻找知道找到有 child 的 DOM node。

function commitWork(fiber) {
  if (!fiber) {
    return
  }

	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 {
    commitDeletion(fiber.child, domParent)
  }
}

Step VIII: Hooks

const Didact = {
  createElement,
  render,
  useState,
}

/** @jsx Didact.createElement */
function Counter() {
  const [state, setState] = Didact.useState(1)
  return (
    <h1 onClick={() => setState(c => c + 1)}>
      Count: {state}
    </h1>
  )
}
const element = <Counter />
const container = document.getElementById("root")
Didact.render(element, container);

准备工作

function updateFunctionComponent(fiber) {
  const children = [fiber.type(fiber.props)]
  reconcileChildren(fiber, children)
}

function useState(initial) {
  // TODO
}

let wipFiber = null
let hookIndex = null

function updateFunctionComponent(fiber) {
  wipFiber = fiber
  hookIndex = 0
  wipFiber.hooks = []
  const children = [fiber.type(fiber.props)]
  reconcileChildren(fiber, children)
}

useState 内部逻辑

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]
}

function useState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex]
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: [],
  }

  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]
}

function useState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex]
  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]
}

Epilogue

• workLoop

• performUnitOfWork

• updateFunctionComponent

• 在 Didact 中，我们在 render 阶段遍历整棵树，而 React 会根据一些标记来跳过一些没有发生变化的子树。

• 我们还在 commit 阶段遍历整棵树。React 仅保留有影响的 Fiber 链接列表，并且也仅只访问这些 Fiber。

• 每当我们构建一个新的 WIP Tree 时，我们会为每个 Fiber 创建新的对象。而 React 会从旧的 Fiber Tree 中回收 Fiber。

• 当 Didact 在 render 阶段收到新的更新时，它会丢弃 WIP Tree 中的工作，并重新从根节点开始。而 React 使用有效期时间戳来标记每次更新，并用它来决定哪个更新具有更高的优先级。

• ...

1. style prop 的处理

2. flatten children 数组

3. useEffect hook

4. reconciliation by key