HostText

1 ）概述

• 在 completeWork 中 對(duì) HostText的處理
• 在第一次掛載和后續(xù)更新的不同條件下進(jìn)行操作
  • 第一次掛載主要是創(chuàng)建實(shí)例
  • 后續(xù)更新其實(shí)也是重新創(chuàng)建實(shí)例

2 ）源碼

定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663

到 case HostText 這里

case HostText: {
  let newText = newProps;
  // 符合這個(gè)條件，說明它不是第一次渲染，就是更新的狀態(tài)
  // 調(diào)用 updateHostText 進(jìn)行更新
  if (current && workInProgress.stateNode != null) {
    const oldText = current.memoizedProps;
    // If we have an alternate, that means this is an update and we need
    // to schedule a side-effect to do the updates.
    updateHostText(current, workInProgress, oldText, newText);
  } else {
    // 對(duì)于第一次渲染
    if (typeof newText !== 'string') {
      invariant(
        workInProgress.stateNode !== null,
        'We must have new props for new mounts. This error is likely ' +
          'caused by a bug in React. Please file an issue.',
      );
      // This can happen when we abort work.
    }
    // 跳過 context 處理
    const rootContainerInstance = getRootHostContainer();
    const currentHostContext = getHostContext();
    // 跳過 hydrate 處理
    let wasHydrated = popHydrationState(workInProgress);
    if (wasHydrated) {
      if (prepareToHydrateHostTextInstance(workInProgress)) {
        markUpdate(workInProgress);
      }
    } else {
      // 創(chuàng)建 文本 實(shí)例
      workInProgress.stateNode = createTextInstance(
        newText,
        rootContainerInstance,
        currentHostContext,
        workInProgress,
      );
    }
  }
  break;
}

• 進(jìn)入 updateHostText

  updateHostText = function(
    current: Fiber,
    workInProgress: Fiber,
    oldText: string,
    newText: string,
  ) {
    // 這個(gè)非常簡單，通過前后 text 是否有區(qū)別
    // 如果不同，則創(chuàng)建新的 text實(shí)例
    if (oldText !== newText) {
      // If the text content differs, we'll create a new text instance for it.
      // 先跳過 context 的處理
      const rootContainerInstance = getRootHostContainer();
      const currentHostContext = getHostContext();
      workInProgress.stateNode = createTextInstance(
        newText,
        rootContainerInstance,
        currentHostContext,
        workInProgress,
      );
      // We'll have to mark it as having an effect, even though we won't use the effect for anything.
      // This lets the parents know that at least one of their children has changed.
      markUpdate(workInProgress);
    }
  };
  

  • 進(jìn)入 createTextInstance

    // packages/react-dom/src/client/ReactDOMHostConfig.js#L272
    export function createTextInstance(
      text: string,
      rootContainerInstance: Container,
      hostContext: HostContext,
      internalInstanceHandle: Object,
    ): TextInstance {
      if (__DEV__) {
        const hostContextDev = ((hostContext: any): HostContextDev);
        validateDOMNesting(null, text, hostContextDev.ancestorInfo);
      }
      const textNode: TextInstance = createTextNode(text, rootContainerInstance);
      // 這個(gè)方法之前閱過
      precacheFiberNode(internalInstanceHandle, textNode);
      return textNode;
    }
    

    • 進(jìn)入 createTextNode

      export function createTextNode(
        text: string,
        rootContainerElement: Element | Document,
      ): Text {
        // 最終 getOwnerDocumentFromRootContainer 這里返回一個(gè)dom對(duì)象，調(diào)用dom的 createTextNode 這個(gè)方法
        return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(
          text,
        );
      }
      

      • 進(jìn)入 getOwnerDocumentFromRootContainer

      function getOwnerDocumentFromRootContainer(
        rootContainerElement: Element | Document,
      ): Document {
        // rootContainerElement.ownerDocument 這里是 window.document 對(duì)象
        // 這么做是為了兼容多平臺(tái)api的使用
        return rootContainerElement.nodeType === DOCUMENT_NODE
          ? (rootContainerElement: any)
          : rootContainerElement.ownerDocument;
      }
      

• HostText 相比于 HostComponents 來說，它沒有多種選擇

• 沒有各種各樣的屬性，整體來說非常的簡單

• 一些特別說明的，寫在了上述代碼注釋中文章來源地址http://www.zghlxwxcb.cn/news/detail-821114.html

到了這里，關(guān)于React16源碼: React中的completeWork對(duì)HostText處理含更新的源碼實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！