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

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
• 最终的返回值是一个对象
  • $$typeof 是 REACT_MEMO_TYPE
  • type，就是我们传入的 function component
  • compare 是我们传入的第3个参数
  • 所以它就跟之前的 forwardRef, context 差不多一类的东西
  • 最终它实现的逻辑肯定还是要到 react-dom 那边来实现的

Fragment

1 ) 概述

• Fragment 实际上是一个 Symbol
• 在我们项目代码中的 <> 和 实际上等价于 和
• 这是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. `.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 的一个封装
  • createFactory 是 createElement 绑定了一个type
  • 比如说我们要去创建一个p标签的节点
    • 如果使用 JS API去创建，比如使用 createElement
    • 每次都要先传入 p，然后再传入 config，再传入它的children
• 其实，我们可以先创建一个p标签的 factory
  • 通过这个factory返回的方法，我们只需要传入config和children，就可以创建一个p标签
  • 而不需要重复的去传p这个字符串来表示我们要创建的是p标签的节点