react源码学习(1)

最新推荐文章于 2024-07-22 10:47:05 发布

coderlin_

最新推荐文章于 2024-07-22 10:47:05 发布

阅读量387

点赞数

分类专栏： react源码学习解析专栏文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/lin_fightin/article/details/124761719

版权

react源码学习解析专栏专栏收录该内容

19 篇文章 7 订阅

订阅专栏

jsx

jsx会被转为createElement方法，看下源码这个方法


export function createElement(type, config, children) {
}

接受三个参数：

type元素类型，对于普通元素，就是div p ，对于函数组件，就是函数本身，对于类组件，就是类本身
config 配置属性，比如ref, key, style…
children 子元素
这个方法的主要作用就是：
1 分离props属性和特殊属性

  let propName;
  const props = {}; // 存储普通元素属性
  // 待提取属性，react内部为了实现某些功能而存在的属性
  let key = null;
  let ref = null;
  let self = null;
  let source = null;


  // 分离props属性和特殊属性
  if (config != null) {
    // 判断是否是合法的ref
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    // 判断是否是合法的key
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    // Remaining properties are added to a new props object
    // 将其他属性存入props中
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        // 不是key self ref source的其中一个
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

2 将子元素挂载到porps.children中

// 将子元素挂载到porps.children中
  // 如果子元素有多个，就是一个数组
  // 如果只有一个，就是一个对象

  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

3 为Props属性赋默认值

// 3 为Props属性赋默认值
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  if (__DEV__) {
    if (key || ref) {
      const displayName =
        typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;

    // 如果通过props去获取key或者ref，就会给你报错。
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }

如果通过props获取Key和ref，在开发环境的时候还会报错。

4 创建并返回ReactElement

// 4 创建并返回ReactElement
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );

看下ReactElement

 */
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    // 组建的类型，十六进制数值或者是SYmbol值
    // React在最终渲染DOM的时候，需要确保元素的类型是REACT_ELEMENT_TYPE，需要此属性作为判断的依据
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    // 元素的具体类型，span, div, class A{} , function App(){}...
    type: type,
    // key值, 元素的唯一标识，用做内部vdom比对提升dom操作性能。
    key: key,
    // ref值 存储元素DOM对象或者组件实例对象
    ref: ref,
    // 存储向组件内部传递的数据
    props: props,

    // Record the component responsible for creating this element.
    // 记录当前元素所属组件（记录当前元素是哪个组件创建的）
    _owner: owner,
  };

返回一个vdom对象。

isValidElement

react内部提供了判断是否是标准ReactELemtn的方法


/**
 * 验证object参数是否是ReactElement，返回布尔值
 * 验证成功的条件：
 * 是对象
 * 部位null
 * 并且$$typeof === React_ELEMNT_TYPE
 */
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

验证成功的条件：

是对象
部位null
并且$$typeof === React_ELEMNT_TYPE(如果支持SYmbol就是一个SYmbol，如果不支持就是一个十六进制数)

React架构

React16版本的架构可以分为三层，调度层，协调层，渲染层。

Scheduler调度层

react15的版本中，采用了循环加递归的方式进行了vdom的比对，由于递归使用js自身的执行栈，一旦开始就无法停止。直到任务执行完成。如果dom树的层级较深，就容易出现长期占用js主线程，导致gui渲染线程无法得到工作，造成页面卡顿。
在16的版本中，放弃了js递归方式进行vdom比对，而是采用了循环模拟递归，而且比对的过程是利用浏览器的空闲时间完成的，不会占用主线程，这就解决了vdom对比造成页面卡顿原因。
在window中提供了requestIdCallback的api，它可以利用浏览器空闲的时间执行任务，但是他自设能触发频率不稳定，并且不是所有浏览器都支持他。
react自己实现了任务调度库，叫做Scheduler，如果浏览器支持postMessage，那么他就会采用postMessage来进行调度，不支持再使用setTimoute，setTimeout的缺点是连续调用setTimeout(()=>{},0)，最后会发现他的触发频率变成了4ms一次。并且Scheduler还采用了小顶堆算法，实现了任务优先级的概念。

Reconciler协调层

react15的版本中，协调器和渲染器交替执行，找到了差异就更新差异，这也是15无法中断的原因，因为会造成页面渲染不完全。
react16中，则是Scheduler和Reconciler交替工作，Scheduler负责调度，Reconciler负责找出差异，打上标记。等所有差异找完之后，才会交给Renderer统一进行DOM更新。这也是为什么react16可以实现可中断的异步更新的原因。

Renderer渲染层

渲染层工作的时候，是同步的，也就是无法中断的。可中断的异步更新的概念是描述Scheduler和Reconciler，他们是在内存中完成的。而Renderer是无法被中断的。
既然无法被中段，那么就不会出现dom渲染不完全的情况，因为渲染器的工作是一气呵成的，从0到1。

Fiber数据结构

fiber本质就是一个js对象。

export type Fiber = {


  /**-----------------实例相关---------------- */
  // 标记不同的组件类型 ，比如函数组件是0，类组件是1....
  tag: WorkTag,
  key: null | string,
  elementType: any,
  // div p span class A{} function A(){} .....
  type: any,
  //实例 实例对象，比如类组件的实例，原生元素就是dom， funciton没有实例 rootFiber的stateNode是FiberRoot
  stateNode: any,

  /**-------- fiber相关--------- */
  return: Fiber | null, //指向自己的父级fiber
  child: Fiber | null, //指向大儿子fiber
  sibling: Fiber | null, //指向兄弟节点fiber
  index: number,
  // fiber工作一般在workInprogress fiber，为了实现复用， alternate指向当前current Fiber得对应的fiber
  // 等到工作完毕，workInprogress fiber就变成current Fiber，以此循环
  alternate: Fiber | null,

  ref:
    | null
    | (((handle: mixed) => void) & { _stringRef: ?string, ... })
    | RefObject,

  /**----------- 状态数据相关-------------- */
  pendingProps: any, //  即将更新的Props
  memoizedProps: any, // 旧的props
  memoizedState: any, // 旧的state

  // Dependencies (contexts, events) for this fiber, if it has any
  dependencies: Dependencies | null,

 
  mode: TypeOfMode,  //当前组件及子组件处于何种渲染模式， createRoot/render

  /**-------- Effect副作用相关-------------- */
  updateQueue: mixed, //该Fiber对应的组件产生的状态会存放到这个队列，比如update对象
  flags: Flags,  // effectTag标记，用来记录当前fiber要执行得DOM操作
  subtreeFlags: Flags, 
  deletions: Array<Fiber> | null, 
  nextEffect: Fiber | null, // 单链表用来快速查找下一个sied effect
  firstEffect: Fiber | null,// 子树中第一个side effect
  lastEffect: Fiber | null, // 子树中最后一个last Effect
  lanes: Lanes, // 优先级
  childLanes: Lanes,
 }

这里主要列了几种比较常用的，比如instance实例相关的属性，作为fiber相关的属性，状态数据相关得属性以及副作用相关的属性。
flags对应的标记是

export type Flags = number;

// Don't change these two values. They're used by React Dev Tools.
export const NoFlags = /*                      */ 0b00000000000000000000000000;
export const PerformedWork = /*                */ 0b00000000000000000000000001;

// You can change the rest (and add more).
export const Placement = /*                    */ 0b00000000000000000000000010;
export const Update = /*                       */ 0b00000000000000000000000100;
export const PlacementAndUpdate = /*           */ Placement | Update;
export const Deletion = /*                     */ 0b00000000000000000000001000;
export const ChildDeletion = /*                */ 0b00000000000000000000010000;
export const ContentReset = /*                 */ 0b00000000000000000000100000;
export const Callback = /*                     */ 0b00000000000000000001000000;
export const DidCapture = /*                   */ 0b00000000000000000010000000;
export const ForceClientRender = /*            */ 0b00000000000000000100000000;
export const Ref = /*                          */ 0b00000000000000001000000000;
export const Snapshot = /*                     */ 0b00000000000000010000000000;
export const Passive = /*                      */ 0b00000000000000100000000000;
export const Hydrating = /*                    */ 0b00000000000001000000000000;
export const HydratingAndUpdate = /*           */ Hydrating | Update;
export const Visibility = /*                   */ 0b00000000000010000000000000;
export const StoreConsistency = /*             */ 0b00000000000100000000000000;

双缓存技术介绍

在react中，DOM得更新采用了双缓存技术，双缓存技术致力于更快速得DOM更新。
举个例子，canvas绘制动画的时候，绘制每一帧动画之前就需要清除上一帧得动画，如果当前帧动画计算较长，就会导致出现替换白屏出现。为了解决这个问题，可以现在内存中构建当前帧动画，绘制完毕后直接替换上一帧，这样就不会出现白屏问题，这种在内存中构建并直接替换的技术叫做双缓存。
React使用双缓存技术完成Fiber树的构建和替换，实现DOM的快速更新。
在react中最多同时存在两颗fiber树，当前屏幕显示的是current Fiber，发生更新的时候，react在内存中构建workInporgress fiber。并且在两颗中之间对应的fiber节点有一个alternate指针，通过这个指针，workInporgress的构建就可以最大化的复用current fiber。进而更快速的构建玩workInporgress fiber。

第一个mount的时候，会先创建FiberRottNode，他的current指针指向rootFiber，然后拷贝一份rootFiber，他就是workInprogress fiber的rootFiber了，然后将alternate指针指向这个复制的节点。通过这个复制的节点继续创建fiber。如
在这里插入图片描述
然后将右边构建完毕的workInprogress fiber树更新为current fiber。

update的时候，

workInporgress fiber可以通过alternate属性并且通过diff决定要不要进行复用。
最终构建完新的workInporegss fiber 树，然后再替换成current Fiber树。
在这里插入图片描述

区分FiberRoot和rootFiber

FIberRoot表示Fiber数据结构对象，是Fiber数据结构的最外层对象
rootFiber表示组件挂载点对应的fiber对象，比如React应用中默认组件挂载点就是id为root的div
FiberRoot.current => rootFiber
rootFiber.stateNode = FiberRoot
在react应用中，FiberRoot只有一个，而rootFiber可以有多个。因为render方法可以调用多次。
fiberRoot会记录应用的更新信息，比如Reconciler完成工作之后，会将工作结果存储在FiberRoot中。

render方法

/**
 * 
 * @param {*} element ReactElement, createElement的返回值
 * @param {*} container  容器
 * @param {*} callback  渲染后执行的回调函数
 * @returns 
 */
export function render(
  element: React$Element<any>,
  container: Container,
  callback: ?Function,
) {
  if (__DEV__) {
    console.error(
      'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
        'instead. Until you switch to the new API, your app will behave as ' +
        "if it's running React 17. Learn " +
        'more: https://reactjs.org/link/switch-to-createroot',
    );
  }

  //判断是否是合法的容器
  if (!isValidContainerLegacy(container)) {
    throw new Error('Target container is not a DOM element.');
  }

  // 初始化FiberRoot和rootFiber
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}

render方法主要接受三个参数

element ： ReactElement, createElement的返回值
container 容器
callback 渲染后执行的回调函数
然后判断是否是合法的container，最后调用legacyRenderSubtreeIntoContainer，他会创建FiberRoot和rootFiber并且开启调度。
react18之后使用render会报错。