- JSX就是Javascript和XML结合的一种格式。是一个 JavaScript 的语法扩展。
- 当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
- 是 React.createElement(component, props, …children) 函数的语法糖
- 在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript
- JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.
原理
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
等效与
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement 最终实际上它创建了一个这样的对象:
// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
渲染虚拟DOM
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明:
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)