react的jsx和React.createElement是什么关系？面试常问5

1、JSX

在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？

这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement，我们来看一下babel的表示形式。

image.png

需要注意的是：

• 自定义组件时需要首字母用大写，会被识别出是一个组件，这是一个规定。
• 小写默认会认为是一个html标签，编译成字符串。

image.png

结论：JSX 的本质是React.createElement这个 JavaScript 调用的语法糖。是JS的语法扩展

2、React.createElement源码阅读

从上面我们知道jsx通过babel编译成React.createElement，下面我们就去看一下相关源码：

2.1 入参解读

入参解读：创造一个元素需要知道哪些信息

createElement 有 3 个入参，这 3 个入参囊括了 React 创建一个元素所需要知道的全部信息。

• type：用于标识节点的类型。它可以是类似“h1”“div”这样的标准 HTML 标签字符串，也可以是 React 组件类型或 React fragment 类型。
• config：以对象形式传入，组件所有的属性都会以键值对的形式存储在 config 对象中。
• children：以对象形式传入，它记录的是组件标签之间嵌套的内容，也就是所谓的“子节点”“子元素”。

对应的DOM结构

从入口文件React.js文件可知，React.createElement方法是从ReactElement文件引入进来的，我们就进入这个文件，定位到createElement方法。

image.png

2.1.1 先来看config参数的处理

这段代码对 ref 以及 key 做了个验证处理，具体如何验证我们先不关心，从方法名称上来辨别一下，然后遍历 config 并把属性提进 props 对象里。

也就是把ref和key剔除。

2.1.2 接下来是一段对于 children 的操作

首先把第二个参数之后的参数取出来，然后判断长度是否大于一。大于一的话就代表有多个 children，这时候 props.children 会是一个数组，否则的话只是一个对象。

2.1.3 最后返回一个调用ReactElement执行方法，并传入刚才处理过的参数

参考 前端进阶面试题详细解答

2.1.4 处理传入的defaultProps

image.png

2.2 小结

createElement 中并没有十分复杂的涉及算法或真实 DOM 的逻辑，它的每一个步骤几乎都是在格式化数据。

3、出参解读

image.png

3.1 ReactElement源码拆解

$$typeof 来帮助我们识别这是一个 ReactElement

3.2 小结

ReactElement 其实只做了一件事情就是组装数据。

可以在React中尝试打印：

得到的控制台结果：

image.png

这个 ReactElement 对象实例，本质上是以 JavaScript 对象形式存在的对 DOM 的描述，也就是虚拟 DOM

3.3 扩展知识

既然是虚拟 DOM，就意味着和渲染到页面上的真实 DOM 不是一个东西，那就需要用ReactDOM.render方法来渲染真实DOM。

ReactDOM.render 方法可以接收 3 个参数，其中第二个参数就是一个真实的 DOM 节点，这个真实的 DOM 节点充当“容器”的角色，React 元素最终会被渲染到这个“容器”里面去。比如，示例中的 App 组件，它对应的 render 调用是这样的：