jsx：是什么怎么用

• 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)