React16源码: React中的HostComponent & HostText的源码实现

这篇具有很好参考价值的文章主要介绍了React16源码: React中的HostComponent & HostText的源码实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HostComponent & HostText

1 )概述

  • HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种
    • 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent
  • HostText,它是单纯的文本节点
  • 主要关注它们的一个更新过程

2 )源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js
进入 updateHostComponent 这个API

function updateHostComponent(current, workInProgress, renderExpirationTime) {
  // 这个先跳过
  pushHostContext(workInProgress);

  if (current === null) {
    // 对于整个应用来讲,如果需要复用服务端渲染返回的dom内容,只有 HostComponent 和 HostText
    // 是需要被复用的,对于 class component 和 function component 本身是不对应于dom的某个节点的
    // 不会调用 hydrate 相关的东西
    tryToClaimNextHydratableInstance(workInProgress);
  }

  // 获取type和props, 对于 HostComponent 没有 state的概念
  const type = workInProgress.type;
  const nextProps = workInProgress.pendingProps;
  const prevProps = current !== null ? current.memoizedProps : null;

  let nextChildren = nextProps.children;
  const isDirectTextChild = shouldSetTextContent(type, nextProps); // 获取该节点是否是 纯字符串

  if (isDirectTextChild) {
    // We special case a direct text child of a host node. This is a common
    // case. We won't handle it as a reified child. We will instead handle
    // this in the host environment that also have access to this prop. That
    // avoids allocating another HostText fiber and traversing it.
    nextChildren = null;
  } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
    // If we're switching from a direct text child to a normal child, or to
    // empty, we need to schedule the text content to be reset.
    // 之前props存在,并且也是文本,则重新设置 tag
    workInProgress.effectTag |= ContentReset;
  }

  // 在 class component 和 host component 都有这个
  // 在 class component 是有 instance
  // 在 dom 节点,也有 instance
  // 对应这两种节点才能拿到 ref, 否则没有引用
  markRef(current, workInProgress);

  // Check the host config to see if the children are offscreen/hidden.
  // 符合 下面这种情况,其中 当前的更新的优先级不为 Never, workInProgress.mode 要符合 ConcurrentMode 并且 设置了 hidden
  // 比如模拟自定义的滑动,浏览器的滚动条,通过这个属性来进行一个优化,把不需要显示的组件设置为 hidden
  // 这样每次滑动,就不需要更新这个组件,减少损耗性能
  if (
    renderExpirationTime !== Never &&
    workInProgress.mode & ConcurrentMode &&
    shouldDeprioritizeSubtree(type, nextProps)
  ) {
    // Schedule this fiber to re-render at offscreen priority. Then bailout.
    workInProgress.expirationTime = Never; // 设置成 Never 这个节点将永不会更新到
    return null;
  }

  // 调用来创建,调和子节点
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  return workInProgress.child;
}
  • 进入 shouldSetTextContent

    • 来自于 packages/react-reconciler/src/ReactFiberHostConfig.js 这里打包对应的是
      • 这里根据不同平台指向不同的js
    • packages/react-reconciler/src/forks/ReactFiberHostConfig.dom.js 看到
      export * from 'react-dom/src/client/ReactDOMHostConfig';
      
    • 定位到 react-dom/src/client/ReactDOMHostConfig.js 中
      export function shouldSetTextContent(type: string, props: Props): boolean {
        return (
          type === 'textarea' ||
          type === 'option' ||
          type === 'noscript' ||
          typeof props.children === 'string' ||
          typeof props.children === 'number' ||
          (typeof props.dangerouslySetInnerHTML === 'object' &&
            props.dangerouslySetInnerHTML !== null &&
            props.dangerouslySetInnerHTML.__html != null)
        );
      }
      
      • 基于此来确定是否继续调和子节点
      • 因为, textarea, option, noscript 这种内部只能显示字符串,里面放新节点没有任何意义
      • string和number是在一个dom节点内的内容
      • 如果有 dangerouslySetInnerHTML 相关也是一个特殊情况
  • 进入 shouldDeprioritizeSubtree

    // packages/react-dom/src/client/ReactDOMHostConfig.js
    export function shouldDeprioritizeSubtree(type: string, props: Props): boolean {
      return !!props.hidden;
    }
    

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L733
进入 updateHostText 这个API文章来源地址https://www.toymoban.com/news/detail-821108.html

function updateHostText(current, workInProgress) {
  // 跳过 hydrate 过程
  if (current === null) {
    tryToClaimNextHydratableInstance(workInProgress);
  }
  // Nothing to do here. This is terminal. We'll do the completion step
  // immediately after.
  return null;
}
  • 对于 HostText 来说,不可能有子节点的,不需要调用 reconcileChildren
  • 真正被插入dom里面要等到后期完成树渲染进行commit时才会放进去
  • 在 update 的过程中,不涉及dom操作, 在completeUnitOfWork 时才会去更新dom

到了这里,关于React16源码: React中的HostComponent & HostText的源码实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React16源码: React中的beginWork的源码实现

    beginWork 1 )概述 在 renderRoot 之后,要对我们的 Fiber 树每一个节点进行对应的更新 更新节点的一个入口方法,就是 beginWork 这个入口方法会有帮助我们去优化整棵树的更新过程 react 它的节点其实是非常多的,如果每一次子节点的一个更新 就需要每一个节点都执行一遍更新的话

    2024年01月20日
    浏览(45)
  • React16源码: React中的unwindWork的源码实现

    unwindWork 1 )概述 在 renderRoot 的 throw Exception 里面, 对于被捕获到错误的组件进行了一些处理 并且向上去寻找能够处理这些异常的组件,比如说 class component 里面具有 getDerivedStateFromError 或者 componentDidCatch 这样的生命周期方法 这个class component 就代表它可以处理它的子树当中渲

    2024年01月25日
    浏览(36)
  • React16源码: React中的performWork的源码实现

    performWork 1 )概述 performWork 涉及到在调度完成,或者同步任务进来之后整个 root 节点链条如何更新 怎么更新一棵 Fiber 树,它的每一个节点是如何被遍历到,以及如何进行更新操作 A. 在执行 performWork 时候,是否有 deadline 的区分 deadline 是通过 reactschedule 它的一个时间片,更新

    2024年01月17日
    浏览(39)
  • React16源码: React中的updateHostRoot的源码实现

    HostRoot 的更新 1 )概述 HostRoot 是一个比较特殊的节点, 因为在一个react应用当中 它只会有一个 HostRoot , 它对应的 Fiber 对象是我们的 RootFiber 对象 重点在于它的更新过程 2 )源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612 HostRoot 创建更新的过程就是在 ReactFiberReconcile

    2024年01月22日
    浏览(43)
  • React16源码: React中的updateClassComponent的源码实现

    ClassComponent 的更新 1 ) 概述 在 react 中 class component,是一个非常重要的角色 它承担了 react 中 更新整个应用的API setState forceUpdate 在react当中,只有更新了state之后,整个应用才会重新进行渲染 在 class component 中, 它的逻辑相对复杂 2 )源码 在 packages/react-reconciler/src/ReactFiberB

    2024年01月21日
    浏览(38)
  • React16源码: React中的renderRoot的源码实现

    renderRoot 1 )概述 renderRoot 是一个非常复杂的方法 这个方法里处理很多各种各样的逻辑, 它主要的工作内容是什么? A. 它调用 workLoop 进行循环单元更新 遍历整个 Fiber Tree,把每一个组件或者 dom 节点对应的 Fiber 节点拿出来单一的进行更新,这是一个循环的操作 把整棵 Fiber T

    2024年01月17日
    浏览(41)
  • React16源码: React中的reconcileChildren的源码实现

    reconcileChildren 1 )概述 在更新了一个节点之后,拿到它的props.children 要根据这个children里面的 ReactElement 来去创建子树的所有的 fiber 对象 要根据 props.children 来生成 fiber 子树,然后判断 fiber 对象它是否是可以复用的 因为我们在第一次渲染的时候,就已经渲染了整个 fiber 子树

    2024年01月20日
    浏览(40)
  • React16源码: React中的setState和forceUpdate源码实现

    setState 和 forceUpdate 1 ) 概述 通过 class component 内部的 setState ,以及 forceUpdate 去更新一个组件的过程 在react的应用当中,我们只有 ReactDOM.render setState ,以及 forceUpdate 这几种种方式去更新react的应用是合理的,其他没有什么特别常用的方式去更新了 而且react官方推荐的也是用

    2024年01月25日
    浏览(37)
  • React16源码: React中的update和updateQueue的源码实现

    React中的update和updateQueue 1 )概述 在 ReactDOM.render 过程中,还需要创建一个 update 对象 update 用于记录组件状态的改变的一个对象,它存放于Fiber对象的 updateQueue 中 updateQueue ,它是一个单向链表的结构,一次整体的更新过程当中 可能在这个queue里会存在多 Update 在这次更新的过

    2024年02月02日
    浏览(37)
  • React16源码: React中的PortalComponent创建, 调和, 更新的源码实现

    PortalComponent 1 )概述 React Portal之所以叫Portal,因为做的就是和“传送门”一样的事情 render到一个组件里面去,实际改变的是网页上另一处的DOM结构 主要关注 portal的创建, 调和, 更新过程 2 )源码 定位到 packages/react-dom/src/client/ReactDOM.js#L576 这里调用的是 ReactPortal.createPortal ,

    2024年01月21日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包