浅谈JSX语法糖

浅谈JSX语法糖

jsx简单觉得来说就是在javascript里面使用html文档。
JSX是一种语法糖，全称：javascript xml。
JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。
看下面的DOM结构：

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

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

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 XML的方式写起来就方便很多了。

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

下面代码:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <div className='app' id='appRoot'>
        <h1 className='title'>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </div>
    )
  }
}

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

编译之后将得到这样的代码

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

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

React.createElement 会构建一个 JavaScript 对象来描述你 XML 结构的信息，包括标签名、属性、还有子元素等, 语法为

React.createElement(
  type,
  [props],
  [...children]
)

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

JSX代码 — > 使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render()函数进行渲染—>真实DOM元素 —>插入页面.

另外jsx特别要注意的是

1. 标签必须要闭合。
2. 最外层只能有一个根元素
3. 写入样式要用className
4. style = {{}}
5. 写入事件的时候要用到驼峰命名法 如 onClick()

<div onClick={this.handleClick}></div>
        如果handleClick需要内部用到this,那么我们可以通过两种方式解决this绑定问题
        1)通过在constructor函数里面进行this的bind
            constructor(){
                super()
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick(){
                console.log(this)
            }
        2)handleClick写成箭头函数
            handleClick = () => {
                console.log(this)
            }

6. input的value值必须要配合onChange才可以，否者的话就只是单纯的进行数据显示的话，只需要通过defaultValue即可。
7. checkbox的checked耶要改成defaultchecked
8. label的for需要改成htmlFor
9. jsx的注释要写成{/**/}