jsx本质是什么？

我们在学习React的时候，会遇到其很核心的一个东西：JSX语法。

JSX代码表面上看是HTML代码，但实际上是用JS去实现的。

常见的JSX代码长这样：

ReactDOM.render(<h1>你好呀！</h1>, document.getElementById('root'))

JSX的本质（实质）是：对React.createElement这个方法的调用。

我们平时用react开发写法是这样的：

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

ReactDOM.render(<Hello name="Andy" />, document.getElementById('root'));

JSX里面实际的写法是这样的：

class Hello extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(Hello, { name: "Andy" }), document.getElementById('root'));

总结：JSX就是通过React.createElement这个方法去实现的。