React 深度学习：ReactChildFiber

﹏ヽ暗。殇╰゛Y 2024-04-17 06:31 58阅读 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 条评论，58人围观）

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

相关阅读

相关 python 深度学习_讨论Python深度学习

![python 深度学习][python] python 深度学习讨论Python深度学习 (Discuss Python Deep Learning) Pyth

逃离我推掉我的手/ 2022年12月10日 01:26/ 0 赞/ 234 阅读

相关深度理解react的useState()

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

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

相关学习React,记录React

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

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

相关深度学习

目录： [一、概述][Link 1] [二、背景][Link 1] [三、人脑视觉机理][Link 1] [四、关于特征][Link 2] [4.1、特征表示的粒度]

﹏ヽ暗。殇╰゛Y/ 2022年08月27日 01:18/ 0 赞/ 415 阅读

相关 React学习

React根本上其实就是一个JavaScript库。它体现了前后分离的思想，将部分组装页面的工作转交给浏览器来完成；不像JSP文件，页面的布局和填入数据是在服务器完成后发送

今天药忘吃喽~/ 2022年06月17日 07:40/ 0 赞/ 154 阅读

相关 React学习

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

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

相关深度学习

胡适的英语老师、民国时期自学成才的出版家王云五先生在年轻的时候是这样自学英语写作的：找到一篇英文的名家佳作，熟读几次以后，把它翻译成中文，等过了一星期之后，再依据中文

怼烎@/ 2022年05月17日 06:45/ 0 赞/ 328 阅读

相关 react 学习

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

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

相关 react学习：React状态

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

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

相关 React 深度学习：ReactHooks

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

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