住房新建网站,网站设计公司哪家比较好,东莞百度seo关键词优化,南京专业网站开发团队HostComponent HostText
1 #xff09;概述
HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent HostText#xff0c;它是单纯的文本节点主要关注它们的一个更新过程
2 #xf…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 wont 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 were switching from a direct text child to a normal child, or to// empty, we need to schedule the text content to be reset.// 之前props存在并且也是文本则重新设置 tagworkInProgress.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
function updateHostText(current, workInProgress) {// 跳过 hydrate 过程if (current null) {tryToClaimNextHydratableInstance(workInProgress);}// Nothing to do here. This is terminal. Well do the completion step// immediately after.return null;
}对于 HostText 来说不可能有子节点的不需要调用 reconcileChildren真正被插入dom里面要等到后期完成树渲染进行commit时才会放进去在 update 的过程中不涉及dom操作, 在completeUnitOfWork 时才会去更新dom
