React进阶笔记【1_JSX 和 createElement】

2022/4/5 ReactJS

# JSX

JSXJavaScript 的一种扩展语法,通过 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

# 总结