React.createElement

查看原文

咱们在 react 我的项目中写的 jsx 代码通过 babel 编译后会变成一般的 js 代码：

<div className="page">
  <Header> Hello, This is React </Header>
  <div>Start to learn right now!</div>
  Right Reserve.
</div>

???? babel 转换

React.createElement(
  "div",
  {className: "page",},
  React.createElement(Header, null, "Hello, This is React"),
  React.createElement("div", null, "Start to learn right now!"),
  "Right Reserve."
);

createElement 函数的作用是生成 ReactElement，一个 ReactElement 是一个对象，它次要蕴含：

// $$typeof 属性能够惟一标识一个 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,
  };

  return element;
};

那 createElement 是在什么时候被执行的呢？

是 render 函数被调用的时候执行。

从方才 babel 转换后的代码中能够看到 Children 类型有 String、原生 DOM 节点的 element、React components (自定义组件的 element)，其余还有 false、null、undefined、number 这些都是 ReactElement，children 类型还能够是一个数组 (在 render 中应用 map 的时候)。

所以在调用 creatElement 后失去了 ReactElement 类型的一个对象，接着依据这个对象生成实在的 dom 元素

而后间接操作浏览器 DOM 元素，将元素挂载下来。