javascript - react库如何重新渲染组件

Question

我试图弄清楚在更新 props 后 react 库如何重新渲染组件.因此我有点猴子补丁ReactDOM.render像这样的方法:

const oldRender = ReactDOM.render

ReactDOM.render = function(){
// ......
console.log("42")
  return oldRender.call(this, ...arguments, () => {
    console.log("done")
    document.dispatchEvent(new Event('react-dom-rendered'))
  })
}

这适用于第一个渲染周期。但是在 props之后渲染组件的更改， console.log s 不再打印。为了弄清楚为什么我在文档中读到 ReactDOM.render只会被称为 一次 .所以我像通过 react 的来源一样通过 google 搜索，但我无法找出 react 如何在 props 更新后重新渲染组件。你能帮我吗？

Answer 1

ReactDom.render 调用一次将组件挂载到 DOM 中。

在状态更新或 Prop 更改时，React 启动 对帐过程。

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called “reconciliation”.

在这个过程中，React 运行了一个非常简单的 diff algorithm在遍历 Virtual DOM 的副本时。

想实现 对帐 ?见 Build your own React和它的 repo .

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

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

    if (oldFiber) {
      oldFiber = oldFiber.sibling
    }

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

    prevSibling = newFiber
    index++
  }
}