阅读 564

React 源码解析之ReactElement

ReactElement.js 整体部分

// packages/react/src/ReactElement.js
// 保留的 props
const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 此标记允许我们将其唯一标识为React元素
    $$typeof: REACT_ELEMENT_TYPE,
    
    // 属于元素的内置属性
    type: type,
    key: key,
    ref: ref,
    props: props,

    // 记录负责创建此元素的组件。
    _owner: owner,
  };

  if (__DEV__) {/*...*/}

  return element;
} 

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

  // Reserved names are extracted(提取保留名称)
  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

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

  return ReactElement(
    type,
    key,
    ref,
    self,
    source, 
    ReactCurrentOwner.current,
    props
  );
}
复制代码

解析

1.ReactElement 是通过 createElement 函数创建;

2.createElement 函数接收 3 个参数,分别是 type, config, children, type 指的是 ReactElement 的类型;

type 类型有

  • 字符串 divp 等代表原生 DOM,称为 HostComponent;
  • class 类型继承 ComponentPureComponent 组件的称为 ClassComponent;
  • 方法就是 FunctionalComponent;
  • 原生提供的 FragmentAsyncMode 等是 Symbol,会特殊处理;
  • 其他;

3.调用 ReactElementReactElement 内部返回一个对象 element

config 逻辑

if(config != null){
  if(hasValidRef(config)) {
    ref = config.ref;
  }
  if(hasValidKey(config)){
    key = '' + config.key;
  }
  self = config.__self === undefined ? null : config.__self;
  source = config.__source === undefined ? null : config.__source;
  // 剩余的属性将添加到新的 props 对象中
  for (propName in config) {
    if(hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
  }
}
复制代码

这段代码

  • 创建的时候都是从 config 传入的,refkey 不会和 config 中的变量一起被处理,而是单独作为变量出现在 ReactElement 上;
  • refkey 做了验证(对于这种校验方法无需内部实现,保持干净,也便于阅读);
  • 遍历 config 把内建的几个属性(剔除原型链上的属性和规定要剔除的属性)丢到 props 中去;

children 逻辑

const childrenLength = arguments.length - 2;
if( childrenLength === 1) {
  props.children = children;
} else {
  const childArray = Array(childrenLength);
  for (let i = 0; i < childrenLength; i++) {
    childArray[i] = arguments[i + 2];
  }
  if (__DEV__) { /*...*/ }
  props.children = childArray;
}
复制代码

第一行可以看出,取出第二个参数后的参数,然后判断长度是否 > 1:

  • > 1 就代表有多个 children,这个时候 props.children 会是一个数组, 所以后面在对 props.children 进行遍历的时候需要注意它是否是数组,当然你也可以利用 React.Children 中的 API,下文中也会对 React.Children 中的 API 进行讲解;
  • === 1 就是一个对象;

返回值

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 此标记允许我们将其唯一标识为React元素
    $$type: REACT_ELEMENT_TYPE,
    
    // 属于元素的内置属性
    type: type,
    key: key,
    ref: ref,
    props: props,

    // 记录负责创建此元素的组件。
    _owner: owner,
  };

  if (__DEV__) {/*...*/}

  return element;
} 
复制代码

核心就是通过 $$type 来识别这是个 ReactElement,后会看到很多类似的类型。

注意:通过 JSX 写的 <APP /> 代表 ReactElementAPP 代表 React Component (组件)。

这章节的内容可以绘制成的流程

createElement 流程

你可以...

上一篇:React 源码解析之总览

下一篇:React 源码解析之React.Children

关注下面的标签,发现更多相似文章
评论