《十五》React 的底层原理

React 的渲染机制：

1. 在 render() 方法中会返回 JSX，JSX 会被转换成 React.createElement() 函数的调用。
2. React.createElement() 会创建出来一个 ReactElement（React 元素），ReactElement 是一个虚拟节点，本质上就是一个 JS 对象。
3. 一堆的 ReactElement 组成一个 JS 的对象树，也就是虚拟 Dom。
4. 最终 React 根据虚拟 Dom 渲染出真实 Dom （document.createElement()），呈现在页面中。

// JSX
const element = (
	<div className='header'>
		<div>标题</div>
	</div>
)	

// JSX 本质上是 React.createElement()
const element = React.createElement(
	"div", 
	{
	  className: "header"
	},
	React.createElement("div", null, "标题")
)

// 虚拟 DOM 节点
console.log(element)

// 真实 DOM 节点
<div class