React 深度学习：ReactChildFiber

﹏ヽ暗。殇╰゛Y 2024-04-17 06:31 78阅读 0赞

> packages/react-reconciler/src/ReactChildFiber.js

`ReactChildFiber` 实现了 React 对子元素的协调算法

## reconcileSingleElement ##

`reconcileSingleElement` 方法用于协调元素类型的 fiber，它接收四个参数:

*  returnFiber：父 fiber
 *  currentFirstChild：当前 fiber
 *  element: 是新的单个子元素
 *  expirationTime：过期时间

`reconcileSingleElement` 算法逻辑：

*  `returnFiber` 可能有多个子 fiber
 *  遍历 `returnFiber` 的子元素，删除 key 与最新的 `element.key` 不相同的元素。

function reconcileSingleElement( returnFiber: Fiber, currentFirstChild: Fiber | null, element: ReactElement, expirationTime: ExpirationTime, ): Fiber {
        const key = element.key;
        let child = currentFirstChild;
        while (child !== null) {
          // TODO: If key === null and child.key === null, then this only applies to
          // the first item in the list.
          if (child.key === key) {
            if (
              child.tag === Fragment
                ? element.type === REACT_FRAGMENT_TYPE
                : child.elementType === element.type
            ) {
              deleteRemainingChildren(returnFiber, child.sibling);
              const existing = useFiber(
                child,
                element.type === REACT_FRAGMENT_TYPE
                  ? element.props.children
                  : element.props,
                expirationTime,
              );
              existing.ref = coerceRef(returnFiber, child, element);
              existing.return = returnFiber;
              if (__DEV__) {
                existing._debugSource = element._source;
                existing._debugOwner = element._owner;
              }
              return existing;
            } else {
              deleteRemainingChildren(returnFiber, child);
              break;
            }
          } else {
            deleteChild(returnFiber, child);
          }
          child = child.sibling;
        }
    
        if (element.type === REACT_FRAGMENT_TYPE) {
          const created = createFiberFromFragment(
            element.props.children,
            returnFiber.mode,
            expirationTime,
            element.key,
          );
          created.return = returnFiber;
          return created;
        } else {
          const created = createFiberFromElement(
            element,
            returnFiber.mode,
            expirationTime,
          );
          created.ref = coerceRef(returnFiber, currentFirstChild, element);
          created.return = returnFiber;
          return created;
        }
      }
    复制代码

转载于:https://juejin.im/post/5d1e8f006fb9a07ecc44a3f9

发表评论取消回复

表情：

评论列表（有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 深度学习：ReactContext

path：packages/react/src/ReactContext.js 源码 import {REACT_PROVIDER_TYPE, REAC...

矫情吗；*/ 2024年04月17日 14:00/ 0 赞/ 76 阅读

相关 React 深度学习：番外二

. hasAtrribute `hasAttribute` 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。 ...

红太狼/ 2024年04月17日 06:31/ 0 赞/ 82 阅读

相关 React 深度学习：ReactChildFiber

packages/react-reconciler/src/ReactChildFiber.js `ReactChildFiber` 实现了 React 对子元素的协...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 06:31/ 0 赞/ 79 阅读

相关学习，没有那么难！Java、Python、Fiink、Kylin、React、深度学习、自然语言

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

亦凉/ 2022年12月05日 10:00/ 0 赞/ 131 阅读

相关深度理解react的useState()

理解并使用react的useState 1、为什么有了这个方法 useState()是专门用在函数组件中的，因为函数组件本来是没有状态的组件，而类组件中可以通过 th

小鱼儿/ 2022年11月16日 01:28/ 0 赞/ 217 阅读

相关学习React,记录React

1.Ant Design Table 组件自定义 render 的作用域，解决找不到 this 问题。 [https://blog.csdn.net/qq\_37954086

「爱情、让人受尽委屈。」/ 2022年10月11日 13:33/ 0 赞/ 197 阅读

相关 React学习

[七个不可错过的 React 组件库与开发框架][React] [在 2017 年学习 React + Redux 的一些建议（上篇）][2017 _ React _ Red

Dear 丶/ 2022年06月08日 06:24/ 0 赞/ 199 阅读

相关 react 学习

react\_learning 1.state负责存储组件里的数据 / JSX中使用JS表达式需要使用\{\}包裹表达式 “value=\{this.state.inp

傷城~/ 2022年03月14日 15:58/ 0 赞/ 221 阅读

相关 react学习：React状态

实现一个点赞按钮。点击数字增加一：建立LikeButton.js import React from 'react' class LikeBu

àì夳堔傛蜴生んèń/ 2022年02月19日 02:19/ 0 赞/ 255 阅读

相关 React 深度学习：ReactHooks

> path：packages/react/src/ReactHooks.js 目前 React 内置了 10 种 Hook： useState useRedu

Dear 丶/ 2022年01月12日 00:49/ 0 赞/ 287 阅读