本小书大部分内容来自作者 Jokcy 的 《React 源码解析》: https://react.jokcy.me/

本文已同步在我的掘金: https://juejin.im/post/5cc81edc6fb9a0321a1508e6

感谢 Jokcy 让我深度了解 React。如他所说,在决定阅读 React 源码时认为不会是一件很难的事,但是真正开始阅读之后才发现,事情没那么简单,因为需要足够的耐心、能够独立思考和静下心来(因为你会碰到之前编码没有见过的写法和概念等等)。

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
);
}

分析 createElement 函数

function createElement(type, config, children) {}
  • 该函数接收 3 个参数,分别是 type, config, children
  • 调用 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];
}
}
}

这段代码做了

  • 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 源码解析之总览