jsx

jsx是我们学习react第一个碰到的新概念，也是react被称为难上手的一个原因，也有很多人将jsx称为js xml，那么到底jsx是什么呢？我们来看官网：it is a syntax extension to JavaScript,它是一个js语法的扩展，那么它扩展的原理是什么呢，我们从一个例子来入手。

<div id='app'>
    <p>jsx</p>
</div>

我们思考一下怎么用JavaScript 对象来表现上面这个DOM 元素的结构，仔细分析可以知道每个dom都可以用一个对象表示，每一个dom所包含的信息无非三个：标签名、属性、子元素。

所以其实上面这个 HTML 所有的信息我们都可以用合法的 JavaScript 对象来表示：

{
  tagName:'div',
  props:{id:'app'},
  children:[
      tagName:'p',
      props:null,
      children:['jsx']
  ]
}

你会发现，HTML 的信息和 JavaScript 所包含的结构和信息其实是一样的，我们可以用 JavaScript 对象来描述所有能用 HTML 表示的 UI 信息。但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  render () {
    return (
     <div id='app'>
        <p>jsx</p>
    </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

经过编译以后会变成：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  render () {
    return (
     React.createElement(
        "div",
        {id:'app'}
        React.createElement(
          "p",
          null
          "jsx"
        )
      )
    )
  }
}

ReactDOM.render(
  React.createElement(App, null), 
  document.getElementById('root')
);

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。这样的代码就是合法的 JavaScript 代码了。所以使用 React 和 JSX 的时候一定要经过编译的过程。这也就解释了为什么我们写任何组件的时候都要引入React，明明有时候我们没用到React，其实React帮我们编译了jsx，而jsx在每个react组件都必不可少，所以我们编写组件的时候肯定需要引入React。

这个时候看jsx就没有那么纠结了，其实它就是一个对象，只不过用jsx这种结构表示的比较简洁，所以react就将用了jsx来表示对象，也有可能是很多人以讹传讹将jsx传言为js + xml，弄的很多人以为jsx很难而产生了畏难情绪，实际上我们完全可以把它认作一个对象，对象能做的事它都能做，所以我们就可以理解为什么jsx可以像对象那样自由地赋值给变量，或者作为函数参数传递、或者作为函数的返回值。

const app = <div id='app'></div>
function returnApp(){
    return app
}

可能还有人有疑惑，那为什么jsx会出现这些我们从未见过的标签，比如<App />、<Todo />，其实react用开头字母大小写来区分元素和组件，<App />其实是一个组件，编译过程如下：

class App extends React.Component {
  render() {
    return React.createElement(
            "div",
            {id:'app'},
            null
        )
  }
}

ReactDOM.render(
  React.createElement(App, {id: 'app'}, null),
  document.getElementById('root')
);

其实react编译组件的时候会将组件的类名作为jsx的名称，所以这个也导致了我们认为jsx是js+xml，其实它的本质还是用了React.createElement()这个方法。

参考链接：

使用 JSX 描述 UI 信息

React Without JSX