React 之 createElement 源码解读

React 与 Babel

元素标签转译

用过 React 的同学都知道，当我们这样写时：

1<div id="foo">bar</div>

Babel 会将其转译为：

1React.createElement("div", {id: "foo"}, "bar");

我们会发现，createElement 的第一个参数是元素类型，第二个参数是元素属性，第三个参数是子元素

组件转译

如果我们用的是一个组件呢？

1function Foo({id}) {
2  return <div id={id}>foo</div>
3}
4
5<Foo id="foo">
6  <div id="bar">bar</div>
7</Foo>

Babel 则会将其转译为：

1function Foo({id}) {
2  return React.createElement("div", {id: id}, "foo")}
3
4React.createElement(Foo, {id: "foo"},
5  React.createElement("div", {id: "bar"}, "bar")
6);

我们会发现，createElement 的第一个参数传入的是变量 Foo

子元素转译

如果我们有多个子元素呢？

1<div id="foo">
2  <div id="bar">bar</div>
3	<div id="baz">baz</div>
4  <div id="qux">qux</div>
5</div>

Babel 则会将其转译为：

1React.createElement("div", { id: "foo"}, 
2  React.createElement("div", {id: "bar"}, "bar"), 
3  React.createElement("div", {id: "baz"}, "baz"),
4  React.createElement("div", {id: "qux"}, "qux")
5);

我们会发现，子元素其实是作为参数不断追加传入到函数中

createElement

那 React.createElement 到底做了什么呢？

源码

我们查看 React 的 GitHub 仓库：https://github.com/facebook/react，查看 pacakges/react/index.js文件，可以看到 createElement 的定义在 ./src/React文件：

1// 简化后
2export {createElement} from './src/React';

我们打开 ./src/React.js文件：

1import {
2  createElement as createElementProd
3} from './ReactElement';
4
5const createElement = __DEV__
6  ? createElementWithValidation
7  : createElementProd;
8
9export { createElement };

继续查看 ./ReactElement.js文件，在这里终于找到最终的定义，鉴于这里代码较长，我们将代码极度简化一下：

1const RESERVED_PROPS = {
2  key: true,
3  ref: true,
4  __self: true,
5  __source: true,
6};
7
8export function createElement(type, config, ...children) {
9  let propName;
10
11  // Reserved names are extracted
12  const props = {};
13
14  // 第一段
15  let key = '' + config.key;
16  let ref = config.ref;
17  let self = config.__self;
18  let source = config.__source;
19
20  // 第二段
21  for (propName in config) {
22    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
23      props[propName] = config[propName];
24    }
25  }
26
27  // 第三段
28  props.children = children;
29
30  // 第四段
31  if (type && type.defaultProps) {
32    const defaultProps = type.defaultProps;
33    for (propName in defaultProps) {
34      if (props[propName] === undefined) {
35        props[propName] = defaultProps[propName];
36      }
37    }
38  }
39
40  // 第五段
41  return ReactElement(
42    type,
43    key,
44    ref,
45    self,
46    source,
47    ReactCurrentOwner.current,
48    props,
49  );
50}

这里可以看出，createElement 函数主要是做了一个预处理，然后将处理好的数据传入 ReactElement 函数中，我们先分析下 createElement 做了什么。

函数入参

我们以最一开始的例子为例：

1<div id="foo">bar</div>
2// 转译为
3React.createElement("div", {id: "foo"}, "bar");

对于createElement 的三个形参，其中type 表示类型，既可以是标签名字符串（如 div 或 span），也可以是 React 组件（如 Foo）

config 表示传入的属性，children 表示子元素

第一段代码 self 和 source

现在我们开始看第一段代码：

1  // 第一段
2  let key = '' + config.key;
3  let ref = config.ref;
4  let self = config.__self;
5  let source = config.__source;

可以看到在 createElement 函数内部，key、ref、__self、__source 这四个参数是单独获取并处理的，key 和 ref 很好理解，__self 和 __source 是做什么用的呢？

通过这个 issue，我们了解到，__self 和 __source 是 babel-preset-react注入的调试信息，可以提供更有用的错误信息。

我们查看 babel-preset-react 的文档，可以看到：

development

boolean 类型，默认值为 false. 这可以用于开启特定于开发环境的某些行为，例如添加 __source 和 __self。在与 env 参数配置或 js 配置文件配合使用时，此功能很有用。

如果我们试着开启 development 参数，就会看到 __self 和 __source 参数，依然以 <div id="foo">bar</div> 为例，会被 Babel 转译成：

1var _jsxFileName = "/Users/kevin/Desktop/react-app/src/index.js";
2React.createElement("div", {
3  id: "foo",
4  __self: this,
5  __source: {
6    fileName: _jsxFileName,
7    lineNumber: 5,
8    columnNumber: 13
9  }
10}, "bar");

第二段代码 props 对象

现在我们看第二段代码：

1// 第二段
2for (propName in config) {
3    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
4      props[propName] = config[propName];
5    }
6}

这段代码实现的功能很简单，就是构建一个 props 对象，去除传入的 key、ref、__self、__source属性，这就是为什么在组件中，我们明明传入了 key 和ref，但我们无法通过 this.props.key 或者 this.props.ref 来获取传入的值，就是因为在这里被去除掉了。

而之所以去除，React 给出的解释是，key 和 ref 是用于 React 内部处理的，如果你想用比如 key 值，你可以再传一个其他属性，用跟 key 相同的值即可。

第三段代码 children

现在我们看第三段代码，这段代码被精简的很简单：

1// 第三段
2props.children = children;

这是其实是因为我们为了简化代码，用了 ES6 的扩展运算法，实际的源码里会复杂且有一些差别：

1const childrenLength = arguments.length - 2;
2  if (childrenLength === 1) {
3    props.children = children;
4  } else if (childrenLength > 1) {
5    const childArray = Array(childrenLength);
6    for (let i = 0; i < childrenLength; i++) {
7      childArray[i] = arguments[i + 2];
8    }
9    props.children = childArray;
10}

我们也可以发现，当只有一个子元素的时候，children 其实会直接赋值给 props.children，也就是说，当只有一个子元素时，children 是一个对象（React 元素），当有多个子元素时，children 是一个包含对象（React 元素）的数组。

第四段代码 defaultProps

现在我们看第四段代码：

1  // 第四段
2  if (type && type.defaultProps) {
3    const defaultProps = type.defaultProps;
4    for (propName in defaultProps) {
5      if (props[propName] === undefined) {
6        props[propName] = defaultProps[propName];
7      }
8    }
9  }

这段其实是处理组件的defaultProps，无论是函数组件还是类组件都支持 defaultProps，举个使用例子：

1// 函数组件
2function Foo({id}) {
3  return <div id={id}>foo</div>
4}
5 
6 Foo.defaultProps = {
7   id: 'foo'
8 }
9
10// 类组件
11 class Header extends Component {
12   static defaultProps = {
13     id: 'foo'
14   }
15   render () {
16     const { id } = this.props
17     return <div id={id}>foo</div>
18   }
19 }

第五段代码 owner

现在我们看第五段代码：

1  // 第五段
2  return ReactElement(
3    type,
4    key,
5    ref,
6    self,
7    source,
8    ReactCurrentOwner.current,
9    props,
10  );

这段就是把前面处理好的 type、key 等值传入 ReactElement 函数中，那 ReactCurrentOwner.current是个什么鬼？

我们根据引用地址查看 ReactCurrentOwner定义的文件：

1/**
2 * Keeps track of the current owner.
3 *
4 * The current owner is the component who should own any components that are
5 * currently being constructed.
6 */
7const ReactCurrentOwner = {
8  /**
9   * @internal
10   * @type {ReactComponent}
11   */
12  current: null,
13};
14
15export default ReactCurrentOwner;

其初始的定义非常简单，根据注释，我们可以了解到 ReactCurrentOwner.current 就是指向处于构建过程中的组件的 owner，具体作用在以后的文章中还有介绍，现在可以简单的理解为，它就是用于记录临时变量。

ReactElement

源码

现在我们开始看 ReactElement 函数，其实这个函数的内容更简单，代码精简后如下：

1const ReactElement = function(type, key, ref, self, source, owner, props) {
2  const element = {
3    // This tag allows us to uniquely identify this as a React Element
4    $$typeof: REACT_ELEMENT_TYPE,
5
6    // Built-in properties that belong on the element
7    type: type,
8    key: key,
9    ref: ref,
10    props: props,
11
12    // Record the component responsible for creating this element.
13    _owner: owner,
14  };
15
16  return element;
17};

如你所见，它就是返回一个对象，这个对象包括 $$typeof、type、key 等属性，这个对象就被称为 “React 元素”。它描述了我们在屏幕上看到的内容。React 会通过读取这些对象，使用它们构建和更新 DOM

REACT_ELEMENT_TYPE

而 REACT_ELEMENT_TYPE 查看引用的 packages/shared/ReactSymbols 文件，可以发现它就是一个唯一常量值，用于标示是 React 元素节点

1export const REACT_ELEMENT_TYPE = Symbol.for('react.element');

那还有其他类型的节点吗？查看这个定义 REACT_ELEMENT_TYPE 的文件，我们发现还有：

1export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
2export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
3export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');
4export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');
5export const REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider');
6export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
7// ...

你可能会自然的理解为 $$typeof 还可以设置为 REACT_FRAGMENT_TYPE等值。

我们可以写代码实验一下，比如使用 Portal，打印一下返回的对象：

1import ReactDOM from 'react-dom/client';
2import {createPortal} from 'react-dom'
3
4const root = ReactDOM.createRoot(document.getElementById('root'));
5
6function Modal() {
7  const portalObject = createPortal(<div id="foo">foo</div>, document.getElementById("root2"));
8  console.log(portalObject)
9  return portalObject
10}
11
12root.render(<Modal />);

打印的对象为：它的 $$typeof 确实是 REACT_PORTAL_TYPE

而如果我们使用 Fragment：

1import ReactDOM from 'react-dom/client';
2import React from 'react';
3
4const root = ReactDOM.createRoot(document.getElementById('root'));
5
6function Modal() {
7  const fragmentObject = (
8    <React.Fragment>
9      <div id="foo">foo</div>
10    </React.Fragment>
11    );
12  console.log(fragmentObject)
13  return fragmentObject
14}
15
16root.render(<Modal />);

打印的对象为：我们会发现，当我们使用 fragment 的时候，返回的对象的 $$typeof 却依然是 REACT_ELEMENT_TYPE 这是为什么呢?

其实细想一下我们使用 portals 的时候，我们用的是 React.createPortal 的方式，但 fragments 走的依然是普通的 React.createElement 方法，createElement 的代码我们也看到了，并无特殊处理 $$typeof 的地方，所以自然是 REACT_ELEMENT_TYPE

那么 $$typeof 到底是为什么存在呢？其实它主要是为了处理 web 安全问题，试想这样一段代码：

1let message = { text: expectedTextButGotJSON };
2
3// React 0.13 中有风险
4<p>
5  {message.text}
6</p>

如果 expectedTextButGotJSON是来自于服务器的值，比如：

1// 服务端允许用户存储 JSON
2let expectedTextButGotJSON = {
3  type: 'div',
4  props: {
5    dangerouslySetInnerHTML: {
6      __html: '/* something bad */'
7    },
8  },
9  // ...
10};
11let message = { text: expectedTextButGotJSON };

这就很容易受到 XSS 攻击，虽然这个攻击是来自服务器端的漏洞，但使用 React 我们可以处理的更好。如果我们用 Symbol 标记每个 React 元素，因为服务端的数据不会有 Symbol.for('react.element')，React 就可以检测 element.$$typeof，如果元素丢失或者无效，则可以拒绝处理该元素，这样就保证了安全性。

回顾

至此，我们完整的看完了 React.createElement 的源码，现在我们再看 React 官方文档的这段：

以下两种示例代码完全等效：

1const element = (
2  <h1 className="greeting">
3    Hello, world!
4  </h1>
5);
6
7const element = React.createElement(
8  'h1',
9  {className: 'greeting'},
10  'Hello, world!'
11);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

1// 注意：这是简化过的结构
2const element = {
3  type: 'h1',
4  props: {
5    className: 'greeting',
6    children: 'Hello, world!'
7  }
8};

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

现在你对这段是不是有了更加深入的认识？

React 系列

讲解 React 源码、React API 背后的实现机制，React 最佳实践、React 的发展与历史等，预计 50 篇左右，欢迎关注

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

React 之 createElement 源码解读

React 与 Babel

元素标签转译

组件转译

子元素转译

createElement

源码

函数入参

第一段代码 self 和 source

第二段代码 props 对象

第三段代码 children

第四段代码 defaultProps

第五段代码 owner

ReactElement

源码

REACT_ELEMENT_TYPE

回顾

React 系列

评论区

相关推荐

React 之 createElement 源码解读

React 与 Babel

元素标签转译

组件转译

子元素转译

createElement

源码

函数入参

第一段代码 __self 和 __source

第二段代码 props 对象

第三段代码 children

第四段代码 defaultProps

第五段代码 owner

ReactElement

源码

REACT_ELEMENT_TYPE

回顾

React 系列

评论区

相关推荐

第一段代码 self 和 source