3.React中的JSX

为什么要使用JSX呢？JSX又是什么呢？我们一步一步的了解。

为什么使用JSX

先看一个简单的例子，如下：

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 虚拟DOM
// 参数1：元素名称  参数2：元素属性对象(null表示无)  参数3：当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 参数1：虚拟dom对象  参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

React在render时（渲染时）需要传入一个虚拟DOM的对象。创建虚拟DOM对象的方式是原生JS。上面的例子中只是创建一个普通的Div节点。那么对于一个复杂并带有层级结构的页面时会是什么样呢？如下：

var dv = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for "
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    )
  )
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))

可以看出，原生JS创建虚拟DOM非常的复杂且不友好。因此React的JSX就隆重登场了。

JSX是什么

JSX是JavaScript XML的简称，能在JS中编写的XML语法，用它来编写html标签或者组件标签。它是不能在浏览器中直接运行的，因此它需要babel-preset-react进行转码编译成原生JS后才能在浏览器中运行。所以简单的说JSX就是构建虚拟DOM的语法糖。

注意：JSX语法，最终会被编译为 createElement() 方法
推荐：使用 JSX 的方式创建组件
安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
  "presets": [
    "env", "react"
  ]
}

/* 2 webpack.config.js */
module: [
  rules: [
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
]

/* 3 在 js 文件中 使用 JSX */
const dv = (
  <div title="标题" className="cls container">Hello JSX!</div>
)

/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))

JSX的注意点

• 注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
  • 类似：label 的 for属性，使用htmlFor代替
• 注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
• 注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
• 注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

因此上面那个复杂的原生JS语法就可以变成如下语法编写:

//JSX语法
ReactDOM.render(
  <div className="shopping-list">
      <h1>Shopping List for</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
  </div>
, document.getElementById('app'))