DaoDaoLee's Blog

React进阶笔记【1_JSX 和 createElement】

2022/4/5 ReactJS

# JSX

JSX 是 JavaScript 的一种扩展语法，通过 Babel 编译会转换为以下格式：

<div>123</div>

// -->
React.createElement('div', 123)
1
2
3
4

# createElement 方法

createElement 会创建一个元素：

export function createElement(type, config, children)
1
  • type：用于标识节点的类型，比如：div ，也可以表示 React 中的组件或者 Fragment 类型
  • config：以对象的形式传入，组件所有的属性都会以键值对的形式存储在 config 对象中
  • children：以对象形式传入，它记录的是组件标签之间的嵌套内容，也就是所谓的子节点、子元素
<ul class='list'>
	<li key='1'></li>
  <li key='2'></li>
</ul>

// -->
React.createElement('ul', {
  className: 'list'
}, React.createElement('li', {
  key: '1'
}, '1'), React.createElement('li', {
  key: '2'
}, '2')
1
2
3
4
5
6
7
8
9
10
11
12
13

# React.createElement 和 ReactElement

开发者使用 JSX 的时候，React 会调用 React.createElement，而该函数会把参数传给 ReactElement 函数，ReactElement 函数会对参数进行规整，然后把返回值扔给 React.createElement 。

# render

JSX 会返回一个 ReactElement 格式的对象，也就是虚拟DOM，然后用 React.render 来渲染成真实dom：

ReactDOM.render(
  // 需要渲染的元素 ReactElement
	element,
  // 要挂载到的目标容器（一个真实DOM）
  container,
  // 回调函数，可选，可以用来处理渲染结束后的逻辑
  [callback]
)
1
2
3
4
5
6
7
8

# 总结