react工具类API

其实只会提到两个api，个人比较了解的两个createElement，cloneElement

有过去看过一点点源码，那么其实就是我们是怎么将jsx转为虚拟dom的。

在react17之前的话我们是需要在每个react文件的顶层去引入React的，因为经过babel编译时会用到React的createElement去将jsx转为React.createElement()这种，运行之后就生成了虚拟dom。在react17 版本之后，Babel（通常与 Webpack 配合使用）会生成一个特殊的导入语句，这个语句会自动引入所需的 React 声明，如 import * as React from 'react'。这样，所以我们在写代码时已不需要再去手动引入了。

先看看createElement的源码，打上注释较为好理解

export function createElement(type, config, children) {
  
let propName;

  const props = {};


//特殊属性
  let key = null;
  let ref = null;
  let self = null;
  let source = null;


//开始处理config 分离props与特殊属性
  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;//处理ref

      if (__DEV__) {
        warnIfStringRefCannotBeAutoConverted(config);
      }
    }
    if (hasValidKey(config)) {
      if (__DEV__) {
        checkKeyStringCoercion(config.key);
      }
      key = '' + config.key;//处理key
    }

    self = config.__self === undefined ? null : config.__self;//处理self
    source = config.__source === undefined ? null : config.__source;//处理source
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {

       //将满足条件的属性添加到props中
        props[propName] = config[propName];
      }
    }
  }


  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];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }

  // Resolve default 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;
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

首先看传入的3个参数

type：元素类型, config：配置属性（props属性和特殊属性）, children：子元素

其实它主要的话是做了四步

1，分离props属性和特殊属性(  key;  ref ;  self;  source)，他会做一个开发环境与生产环境的区分，在生产环境中如果对于某些属性不正确的使用会控制台警告

实际看看他是怎么处理的

通过对象的可描述属性去重新了ref和key的get函数，并把configurable设为了true

2，将子元素挂载到了props.children当中

3，为props赋默认值

4，创建并返回createElement

其实处理完前三步之后他是去调的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
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  if (__DEV__) {
    // The validation flag is currently mutative. We put it on
    // an external backing store so that we can freeze the whole object.
    // This can be replaced with a WeakMap once they are implemented in
    // commonly used development environments.
    element._store = {};

    // To make comparing ReactElements easier for testing purposes, we make
    // the validation flag non-enumerable (where possible, which should
    // include every environment we run tests in), so the test framework
    // ignores it.
    Object.defineProperty(element._store, 'validated', {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    // self and source are DEV only properties.
    Object.defineProperty(element, '_self', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    // Two elements created in two different places should be considered
    // equal for testing purposes and therefore we hide it from enumeration.
    Object.defineProperty(element, '_source', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }

  return element;
};

去生成的对象

cloneElement  的话气死在实际业务组件中，并不会怎么去用到，但是在一些开源项目，或者是公共插槽组件中用处还是蛮大的，比如说，我们可以在组件中，劫持children element，然后通过cloneElement克隆element，混入props。经典的案例就是 react-router中的Swtich组件，通过这种方式，来匹配唯一的 Route并加以渲染。它的作用的话就是在组件中，去劫持children，然后给children赋能一些额外的props

function MyComponent({ children }){
    const newChildren = React.cloneElement(children, { age: 18})
    return <div> { newChildren } </div>
}