# React 中 JSX 原理

JSX 由 babel 进行转化，例如

就被转化成 React.createElement ('div', {class, id}, []) 这样的函数。这些函数经过里面的嵌套关系最终形成一棵元素树（对象树），也就是虚拟 DOM，React 再根据这些虚拟 DOM 再渲染生成真实 DOM。

虚拟 DOM 就是由 JS 对象模拟成类似于 div 这样的标签。里面的每个节点就是虚拟节点。

React.createElement(component, props, ...children)

参数一：type 当前 ReactElement 的类型，如果是组件就是组件的名称

参数二：config 以对象的方式存储 jsx 中的属性

参数三：children 存放在标签中的内容，(如果标签里还套着其他标签的话，会以剩余参数的形式传入一个个 React.createElement (component, props, ...children))，最终以 children 数组的方式进行存储