JSX的本质是什么

JSX 简介 – React (reactjs.org)

官网写的非常清楚：

概念：
- JSX，是一个 JavaScript 的语法扩展，我们利用JSX这个语法糖来更好地描述 UI 和数据的交互形式。
React元素渲染机制：
- 在编译之后，JSX 表达式会被Babel转为**React.createElement() 的函数调用**，并且对其取值后得到 JavaScript 对象。
- 可以说，JSX的本质就是React.createElement的函数调用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const element = (
  <h1 className="greeting">
    Hello, world!
    {a}
  </h1>
);
// 等价于
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!',
  a
);

createElement 函数有 3 个入参，这 3 个入参包含了我们在创建一个 React 元素的全部信息。
- type：用于标识节点的类型。可以是原生态的 div 、span 这样的 HTML 标签，也可以是 React 组件，还可以是 React fragment（空元素）。
- config：一个对象，组件所有的属性（不包含默认的一些属性）都会以键值对的形式存储在 config 对象中。
- children：泛指第二个参数后的所有参数，它记录的是组件标签之间嵌套的内容，也就是所谓的“子节点”“子元素”。
这里就解答了「为什么jsx中不允许写语句，只允许写表达式」
- 基于React元素渲染机制，因为jsx会被编译为react元素对象，其中调用时，我们写的大括号中的内容会作为React.createElement()的第三个参数，作为函数的参数，自然不允许使用语句
createElement方法最后返回一个调用ReactElement执行方法，并传入处理过的参数，返回一个ReactElement实例，即虚拟DOM（以 JavaScript 对象形式存在的对 DOM 的描述）
最后调用ReactDOM.render方法将虚拟DOM转换为真实DOM，并挂载到页面中
为什么onclick变成了onClick
- 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

Contents