JSX

基本用法

除了通过 React.createElement方法来创建元素以外，实际上，React还提供了一种更好的创建方式，这就是JSX语法。下面我们就来看一下，使用 JSX 如何创建一个元素。

创建一个 h1 元素：

const h1Ele = <h1>Hello</h1>

从代码上可以看到，这里我使用标签的方式定义了一个h1元素，这种特有的用法在 React 中称之为 jsx语法，全称叫 JavaScript XML，它是JavaScript语法的一种扩展。这种语法允许咱们在js代码中，可以使用类似于 xml 的方式来定义元素。

这里我们使用React.createElement方法再定义一个h1元素，然后对比一下这两个对象。

const h1Ele = <h1>hello</h1>
const _h1Ele = React.createElement("h1", null, "hello")
console.log(h1Ele, _h1Ele)

这两个对象在结构完全保持一致。

实际上我们知道，类似于jsx这样的语法，在 js代码中，它并不是合法的代码，也就是说，js引擎无法正常的执行，那为什么这里控制台没有抛错，而是正常执行了呢？

React提供的这一套jsx语法，在js代码真正被执行之前，实际上还有一个转换的过程，其中有一个转换工具，会将我们代码中使用jsx创建的元素，通通转化成使用 createElement方法来创建，然后再把转换完成之后的代码交给浏览器执行，这一个工具就是babel，打开 babel 网站，我们来看一下：

babel提供了一个在线的转换方式，在这一个页面中，我们可以在左侧输入jsx代码，在右侧就可以实时看到转换完成之后的结果。比如，这里我通过jsx创建h1元素，完成之后在右侧就可以看到与之对应的javascript代码了。

回到我们的开发环境中，我们不用过多的关心如何来配置babel让其完成jsx的转换，因为我们在构建整个项目时，脚手架工具已经帮助我们完成了这一块的部署，我们直接使用jsx就可以了。

表达式

表达式的目的是为了让我们能够在jsx语法中执行javascript代码，你可以把它看成是一种xml和javascript的结合方式。它的使用方式很简单，我们只需要通过一对花括号{}就可以用来标志表达式了，比如，我要将某个变量的值在h1元素中显示出来，就可以这样来操作：

const title = "Hello"
const h1Ele = <h1>{title}</h1>

ReactDOM.render(h1Ele, document.querySelector("#root"))

当babel解析jsx语法时，会把花括号里面的语句当成js的表达式来执行。

再比如，我现在要让这个h1元素的字体变成红色，我就可以设置它的style属性：

const h1Ele = <h1 style={{
  color: "red"
}}>{title}</h1>

这里外层的花括号是表达式，里面我们传递的是一个javascript对象。

在表达式中，我们还可以进行三目运算：

const h1Ele = <h1 style={{
  color: "red"
}}>{false ? "Hello" : "Hi"}</h1>

这里三目运算的返回值，就是表达式的值。

除了以上的用法以外，我们还可以在表达式中调用函数，比如，我要动态渲染一个ul列表就可以这样操作：

const arr = ["HTML", "CSS", "JAVASCRIPT"]
const ulEle = (
  <ul>
    {
      arr.map((item, index) => {
        return <li key={index}>{item}</li>
      })
    }
  </ul>
)
ReactDOM.render(ulEle, document.querySelector("#root"))

这里，我们就在表达式中调用了数组的map方法，并将这个方法的返回值当成ul的子元素。