正文

本系列是講述從0開始實(shí)現(xiàn)一個(gè)react18的基本版本。由于React源碼通過Mono-repo 管理倉庫，我們也是用pnpm提供的workspaces來管理我們的代碼倉庫，打包我們使用rollup進(jìn)行打包。

倉庫地址

本章節(jié)主要是講解我們?nèi)绾螌⑸弦还?jié)得到的fiberNode樹，渲染到頁面中。React中commit分為下面三個(gè)階段，這節(jié)我們講解簡單的commit階段：

• beforeMutation階段
• mutation階段
• layout階段

這節(jié)主要講解commit其中的mutation placement階段：

我們經(jīng)常把Renderer工作的階段被稱為commit階段。在commit階段，會將我們上一講中生成的各種flags提交（commit）到宿主環(huán)境UI中。我們前端通常使用的是ReactDOM進(jìn)行處理。這節(jié)我們簡單的實(shí)現(xiàn)了一個(gè)ReactDom包，看看是如何把調(diào)和和瀏覽器環(huán)境連起來的。

橋梁

在React中，react-reconciler和react-dom是2個(gè)不同的包，react-dom主要是提供瀏覽器宿主相關(guān)的方法。回想我們每次在使用react開發(fā)項(xiàng)目的過程中,通過下方代碼調(diào)用：

ReactDom.createRoot(root).render(<App />)

所以需要提供createRoot方法。返回一個(gè)render方法，接收ReactElement元素。

export function createRoot(container: Container) {
  const root = createContainer(container);
  return {
    render(element: ReactElementType) {
      updateContainer(element, root);
    },
  };
}

內(nèi)部通過createContainer和updateContainer建立2個(gè)包的連接。具體的流程可以查看我們之前的章節(jié)。

commit Effect

在上一節(jié)中，我們在workLoop執(zhí)行完后后得到了一個(gè)帶有標(biāo)記的wip fiber tree（如下圖所示）, 在commit階段，我們要通過這個(gè)fiber樹將內(nèi)容渲染到屏幕中。

commitRoot執(zhí)行

將最后生成的finishedWork傳遞給commitRoot, 然后根據(jù)頂部的flags和subtreeFlags來判斷是否有渲染節(jié)點(diǎn)：

function commitRoot(root: FiberRootNode) {
  const finishedWork = root.finishedWork;
  if (finishedWork === null) {
    return;
  }
  // 重置
  root.finishedWork = null;
  // 判斷是否存在子階段需要執(zhí)行的操作
  const subtreeHasEffect =
    (finishedWork.subtreeFlags & MutationMask) !== NoFlags; // 子節(jié)點(diǎn)是否有更新
  const rootHasEffect = (finishedWork.flags & MutationMask) !== NoFlags; // 根節(jié)點(diǎn)是否更新
  if (subtreeHasEffect || rootHasEffect) {
    // beforeMutation
    // mutation Placement
    commitMutationEffects(finishedWork);
    root.current = finishedWork;
    // layout
  } else {
    root.current = finishedWork;
  }
}

commitMutationEffects執(zhí)行

我們知道div對應(yīng)的fiberNode是標(biāo)有flags = placement的，所以在hostFiberNode中的subtreeHasEffect是有值的，所以會走到commitMutationEffects分支。那它內(nèi)部到底是有什么作用呢？

commitMutationEffects執(zhí)行的主要作用就是找到對應(yīng)flags的fiberNode, 并執(zhí)行相應(yīng)的Dom操作。

• 我們需要向下遍歷找到最底部的subtreeFlags不為0的fiberNode的子fiberNode節(jié)點(diǎn)
• 由于父節(jié)點(diǎn)的subtreeFlags存在，不代表child對應(yīng)的flags存在，可能是child對應(yīng)的sibling節(jié)點(diǎn)的flags存在
• 所以在找到對應(yīng)的subtreeFlags的child的fiberNode后，需要在向上遍歷，查找對應(yīng)的sibling節(jié)點(diǎn)。

commitMutationEffectsOnFibers

對每一個(gè)fiberNode我們會執(zhí)行commit Effects的操作。

const commitMutationEffectsOnFibers = (finishedWork: FiberNode) => {
  const flags = finishedWork.flags;
  if ((flags & Placement) !== NoFlags) {
    commitPlacement(finishedWork);
    finishedWork.flags &= ~Placement;
  }
  // flags update
  // flags childDeletion
};
const commitPlacement = (finishWork: FiberNode) => {
  if (__DEV__) {
    console.warn("執(zhí)行commitPlacement操作", finishWork);
  }
  // parentDom 插入 finishWork對應(yīng)的dom
  // 1. 找到parentDom
  const hostParent = getHostParent(finishWork);
  if (hostParent !== null) {
    appendPlacementNodeIntoContainer(finishWork, hostParent);
  }
};

其中有一個(gè)getHostParent是獲取到對應(yīng)父Container（容器元素），對應(yīng)瀏覽器環(huán)境就是Dom,

getHostParent執(zhí)行

找父contianer容器，向上遞歸 主要是分為2大類。第一類是對應(yīng)HostComponent(類似<div>), 第二類就是根節(jié)點(diǎn)（#root), 他們分別對應(yīng)不同的位置。

function getHostParent(fiber: FiberNode): Container | null {
  let parent = fiber.return;
  while (parent) {
    const parentTag = parent.tag;
    // HostComponent  HostRoot
    if (parentTag === HostComponent) {
      return parent.stateNode as Container;
    }
    if (parentTag === HostRoot) {
      return (parent.stateNode as FiberRootNode).container;
    }
    parent = parent.return;
  }
  if (__DEV__) {
    console.warn("未找到HostParent");
  }
  return null;
}

appendPlacementNodeIntoContainer執(zhí)行

當(dāng)我們上一步找到父container后，接下來就是要把自身的stateNode插入到父container中，然后渲染的界面上。

appendPlacementNodeIntoContainer 這個(gè)函數(shù)接受2個(gè)參數(shù)，第一個(gè)是當(dāng)前fiberNode, 第二個(gè)父container。想想什么樣的fiberNode需要渲染到屏幕中。目前demo層級來看，只有下面2個(gè)節(jié)點(diǎn)需要展示到屏幕中。

• HostComponent
• HostText

所以appendPlacementNodeIntoContainer需要向下找到對應(yīng)的節(jié)點(diǎn)。然后插入到contaienr中

function appendPlacementNodeIntoContainer(
  finishedWork: FiberNode,
  hostParent: Container
) {
  // fiber Host
  if (finishedWork.tag === HostComponent || finishedWork.tag === HostText) {
    appendChildToContainer(hostParent, finishedWork.stateNode);
    return;
  }
  const child = finishedWork.child;
  if (child !== null) {
    appendPlacementNodeIntoContainer(child, hostParent);
    let sibling = child.sibling;
    while (sibling !== null) {
      appendPlacementNodeIntoContainer(sibling, hostParent);
      sibling = sibling.sibling;
    }
  }
  return null;
}

例子：

我們通過一個(gè)特定的例子，來講解commit mutation中具體的執(zhí)行過程。比如：我們有如下的結(jié)構(gòu)，更新的flags標(biāo)記如下：

commitMutationEffects會找到subtreeFlags值不為0的頂層fiberNode，然后開始向下遍歷，直到找到world fiberNode

遞歸向上的執(zhí)行commitMutationEffectsOnFibers，先自己，然后sibling, 然后return。

commitMutationEffectsOnFibers: 例如world fiberNode，自身flags = 1，然后會通過getHostParent找到類型為HostComponent的div fiberNode, 然后把自己的stateNode對應(yīng)的dom, 通過appendChild插入到div fiberNode的stateNode中。

這樣一直向上，最終就會把div fiberNode對應(yīng)的dom元素，append到root中。

以上就是React18系列commit從0實(shí)現(xiàn)源碼解析的詳細(xì)內(nèi)容，更多關(guān)于React18系列commit源碼的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論