React16源码: memo, Fragment, StrictMode, cloneElement, createFactory源码实现

2024-01-02 23:33:04

memo


1 ) 概述

  • memo 在react 16.6 推出的一个API
  • 它的用意是让 function component,有一个类似 PureComponent 的一个功能
    • PureComponent 提供了 class component 组件类型
    • 在props没有变化的情况下,它可以不重新渲染
  • 目的是给 function component 做一个 PureComponent 的对标
  • 这个用法很简单,就不进行举例了

2 ) 源码解析

// memo.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {REACT_MEMO_TYPE} from 'shared/ReactSymbols';

import isValidElementType from 'shared/isValidElementType';
import warningWithoutStack from 'shared/warningWithoutStack';

export default function memo<Props>(
  type: React$ElementType,
  compare?: (oldProps: Props, newProps: Props) => boolean,
) {
  if (__DEV__) {
    if (!isValidElementType(type)) {
      warningWithoutStack(
        false,
        'memo: The first argument must be a component. Instead ' +
          'received: %s',
        type === null ? 'null' : typeof type,
      );
    }
  }
  return {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
}
  • 可以看到 memo 是一个方法
  • 第一个参数 type 可以是 function component
  • 第二个参数 compare
    • 是一个 old props 和 new props 的对比方法
    • 返回值是 boolean,类似于 SCU
  • 最终的返回值是一个对象
    • $$typeofREACT_MEMO_TYPE
    • type,就是我们传入的 function component
    • compare 是我们传入的第3个参数
    • 所以它就跟之前的 forwardRef, context 差不多一类的东西
    • 最终它实现的逻辑肯定还是要到 react-dom 那边来实现的

Fragment


1 ) 概述

  • Fragment 实际上是一个 Symbol
  • 在我们项目代码中的 <></> 实际上等价于 <React.Fragment><React.Fragment />
  • 这是React 渲染函数 render 中返回的单个节点的约束和无用div节点的平衡处理

2 )源码

// React.js

Fragment: REACT_FRAGMENT_TYPE,
  • 从概述中得知,本身这个节点没有任何的意义
  • 它也不会生成多余的节点,只是告诉 react 里面是有多个兄弟节点
  • 本身就是一个 Symbol,没有特殊的含义
  • 它的作用就是用于包裹节点

StrictMode


1 ) 概述

  • StrictMode 本质是一个组件
  • 它的作用是在渲染内部组件时,发现不合适的代码并给出提醒

2 )源码

  // React.js
  StrictMode: REACT_STRICT_MODE_TYPE,
  • 实际上它也是一个 Symbol
  • 它就跟 ConcurrentMode 是差不多的意思
  • 它这个节点下面的所有子树都要按照某一种模式进行渲染
  • 对于其规则下面的所有子树的节点,会给我们提供一些过时的API的提醒
    • 比如说在某个节点下面,使用了 componentWilMount 这种将要过期的生命周期方法的时候
    • 它就会做出提醒,说你这个方法是不好的,你不应该这么去做
    • 它使用方式也是像 react component,所以影响的范围仅仅是它的子树
  • 类似于 ConcurrentMode, 在它的节点下面才会是有一个异步渲染情况

cloneElement


1 ) 概述

  • 对原 ReactElement 进行克隆处理
  • 返回一个新的ReactElement

2 )源码分析

直接定位在 ReactElement.js

  // ReactElement.js
  export function cloneElement(element, config, children) {
    invariant(
      !(element === null || element === undefined),
      'React.cloneElement(...): The argument must be a React element, but you passed %s.',
      element,
    );

    let propName;

    // Original props are copied
    const props = Object.assign({}, element.props);

    // Reserved names are extracted
    let key = element.key;
    let ref = element.ref;
    // Self is preserved since the owner is preserved.
    const self = element._self;
    // Source is preserved since cloneElement is unlikely to be targeted by a
    // transpiler, and the original source is probably a better indicator of the
    // true owner.
    const source = element._source;

    // Owner will be preserved, unless ref is overridden
    let owner = element._owner;

    if (config != null) {
      if (hasValidRef(config)) {
        // Silently steal the ref from the parent.
        ref = config.ref;
        owner = ReactCurrentOwner.current;
      }
      if (hasValidKey(config)) {
        key = '' + config.key;
      }

      // Remaining properties override existing props
      let defaultProps;
      if (element.type && element.type.defaultProps) {
        defaultProps = element.type.defaultProps;
      }
      for (propName in config) {
        if (
          hasOwnProperty.call(config, propName) &&
          !RESERVED_PROPS.hasOwnProperty(propName)
        ) {
          if (config[propName] === undefined && defaultProps !== undefined) {
            // Resolve default props
            props[propName] = defaultProps[propName];
          } else {
            props[propName] = config[propName];
          }
        }
      }
    }

    // Children can be more than one argument, and those are transferred onto
    // the newly allocated props object.
    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;
    }

    return ReactElement(element.type, key, ref, self, source, owner, props);
  }
  • 首先,它把props首先复制过来,const props = Object.assign({}, element.props);
  • 然后呢把key和 ref 也复制过来 然后再进行一些处理
  • 其实就是创建一个新的 React Element
  • 其实整体的过程是跟 createElement 是差不多的
  • 只不过它是传入了一个 element,然后他进行一个克隆这么一个过程

createFactory


1 ) 概述

  • 返回一个某种类型的 ReactElement 工厂函数
  • 可以利用返回的函数来创建一个 ReactElement

2 )源码分析

export function createFactory(type) {
  const factory = createElement.bind(null, type);
  // Expose the type on the factory and the prototype so that it can be
  // easily accessed on elements. E.g. `<Foo />.type === Foo`.
  // This should not be named `constructor` since this may not be the function
  // that created the element, and it may not even be a constructor.
  // Legacy hook: remove it
  factory.type = type;
  return factory;
}
  • 这个源码比较简洁
  • createFactory 对于写 jsx 的场景几乎是不可能用到的
  • 因为 createFactory 是对 createElement 的一个封装
    • createFactorycreateElement 绑定了一个type
    • 比如说我们要去创建一个p标签的节点
      • 如果使用 JS API去创建,比如使用 createElement
      • 每次都要先传入 p,然后再传入 config,再传入它的children
  • 其实,我们可以先创建一个p标签的 factory
    • 通过这个factory返回的方法,我们只需要传入config和children,就可以创建一个p标签
    • 而不需要重复的去传p这个字符串来表示我们要创建的是p标签的节点

文章来源:https://blog.csdn.net/Tyro_java/article/details/135345323
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。