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

1、JSX

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

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

需要注意的是：

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

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

2、React.createElement源码阅读

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

2.1 入参解读

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

export function createElement(type, config, children)

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

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

React.createElement("ul", {
   
  // 传入属性键值对
  className: "list"
   // 从第三个入参开始往后，传入的参数都是 children
}, React.createElement("li", {
   
  key: "1"
}, "1"), React.createElement("li", {
   
  key: "2"
}, "2"));

对应的DOM结构

<ul className="list">
  <li key="1">1</li>
  <li key="2">2</li>