React实战—学习必经之路-JSX语法（2）

React必修技能JSX

本篇咱们来了解React的JSX语法，在此以前，咱们先安装React。

这里须要注意两点：

1.第一点记得安装node,地址：https://nodejs.org/en/ 使用lts版本。

2.安装脚手架，地址：https://github.com/facebookin...。

步骤

1.安装脚手架

npm install -g create-react-app

2.构建项目

create-react-app hello-react

3.启动项目

输入

cd hello-react
  yarn start

看到界面，创建样板项目完成。

注意

1.npm 有时候慢，多等会。

2.可使用gitbash命令行，比cmd好用太多。

地址：https://gitforwindows.org/

初识JSX

在安装完毕之后让咱们回到今天的主题，React的JSX语法。

我自己是很反对动不动就搞一个语言或者推倒一个东西重来的，一来是学习成本，二来是项目积淀清零。

可是我很喜欢JSX，这并不矛盾，由于它确实挺好用。

咱们看看JSX究竟是怎么回事。

打开App.js,删掉无用的东西变成小纯洁,模仿以前原生星星组件写法。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class RatingStar extends Component {
  render () {
    return (
      <div id ="box">
          <h1>我是星星评分组件</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <RatingStar />,
  document.getElementById('root')
)
export default RatingStar;

这里的 Component就是至关于咱们本身写那个component.js，react就是实现virtualDOM什么的东西。

ReactDOM就至关于帮咱们把咱们要渲染的东西扔到root上面，粗略类比mounted方法（不是，可是先这么理解就好。

那么重点来了，return 小括号里面的四不像是什么？

你若是是一个字符串我能理解，你若是是一个对象我也能理解，但是你是JS里面X html 就很差理解了。

其实这个就是咱们以前使用一个字符串描述一个组件。

`
<div class='starbox'>
    <span data-index="0" class=${this.state.score >= 1 ? 'on' : ''}></span>
    <span data-index="1" class=${this.state.score >= 2 ? 'on' : ''}></span>
    <span data-index="2" class=${this.state.score >= 3 ? 'on' : ''}></span>
    <span data-index="3" class=${this.state.score >= 4 ? 'on' : ''}></span>
    <span data-index="4" class=${this.state.score >= 5 ? 'on' : ''}></span>
    <strong class='score'>${this.state.score}${this.props.unit}</strong>
</div>
`

可是你们看着一点也不优雅，重点是若是我操做不少东西，字符串拼接，加上变量，若是在写if else判断，那这个字符串的通用性和可维护性几乎为0.用字符串去模拟一个组件明显太弱了。

那么用什么呢？

我看先看这段要模拟的东西。

<div id ="box">
    <h1 className="title">我是星星评分组件</h1>
</div>

每一个 DOM 元素的结构均可以用 JavaScript 的对象来表示。你会发现一个 DOM 元素包含的信息其实只有三个：标签名，属性，子元素。因此上面这个 HTML 全部的信息，咱们均可以用合法的 JavaScript 对象来表示：

{
  tag: 'div',
  attrs: {id: 'box'},
  children: [
    {
      tag: 'h1',
      arrts: {className: 'title'},
      children: ['我是星星评分组件']
    }
  ]
}

注意文本也是节点，可是你懂的，这么写比较反人类，咱们更喜欢这样写：

<div id ="box">
    <h1>我是星星评分组件</h1>
</div>

因此facebook就把 JavaScript 的语法扩展了一下，让 JavaScript 语言可以支持这种直接在 JavaScript 代码里面编写相似 HTML 标签结构的语法，这样写起来就方便不少了。编译的过程会把相似 HTML 的 JSX 结构转换JavaScript 的对象结构。这就是大名鼎鼎的JSX。其实所谓的JSX就是 JavaScript 对象。

其实上面的JSX代码，

render () {
    return (
      <div id ="box">
          <h1>我是星星评分组件</h1>
      </div>
    )
 }

转化为js就是:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class RatingStar extends Component {
  render () {
    return (
     React.createElement(
        "div",
         {id:'box'},
        React.createElement(
          "h1",
          { className: 'title' },
          "我是星星评分组件"
        )
      )
    )
  }
}

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

其中 createElement(a, b, c)

第一个参数 a：表示元素的类型，好比：h1, div 等。

第二个参数 b：表示该元素上的属性，使用 JavaScript 对象方式表示。

第三个参数 c：表示该元素内部的内容，能够是文字，能够继续嵌套另一个 React.createElement(a, b, c)

其实React.createElement 就至关于咱们以前原生js里面的

const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
}

只不过这里用的是'createDOMFromObject'，没有这个函数，我编得理解意思就好。

这里有一个个问题，为何要用js对象模拟？而不是直接DOM操做？

1.由于操做对象先肯定好变化，要比直接修改DOM性能高太多。

2.由于不是全部的东西最后都要修改DOM或者渲染到界面。

JSX语法

其实JSX就是一个语法糖，在JS里面写普通的HTML，而后生成一个能够描述UI样子的JS对象，供给react去使用。那么咱们就看看JSX怎么用。

render里面使用JSX最多见的状况。

还记得咱们原生写render的时候，最外层咱们包了一个div，因此同样。

注意，必需要用一个外层的 JSX 元素把全部内容包裹起来。

render () {
    return (
      <div id ="box">
          <h1>我是星星评分组件</h1>
      </div>
      <div>我是其余</div>
    )
}

正确：

<div id ="box">
    <h1>我是星星评分组件</h1>
    <div>我是其余</div>
</div>

更多的时候JSX配合JS使用，其实就是把JS扔到{}里面。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class RatingStar extends Component {
  render () {
    const isHandsome = true;
    const Handsome = <span>彬哥长着一张盛世美颜</span>
    const noHandsome = <span> 彬哥长的天怒人怨</span>
    return (
      <div id ="box">
          <h1>我是星星评分组件</h1>
          <div>
            {1+1}  
          </div>
      </div>
    )
  }
}

ReactDOM.render(
  <RatingStar />,
  document.getElementById('root')
)
export default RatingStar;

更多状况是根据条件返回对应的输出结果，好比：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class RatingStar extends Component {
  render () {
    const isHandsome = true;
    const Handsome = <span>彬哥长着一张盛世美颜</span>
    const noHandsome = <span> 彬哥长的天怒人怨</span>
    return (
      <div id ="box">
          <h1>我是星星评分组件</h1>
          <div>
            {isHandsome?Handsome:noHandsome}  
          </div>
      </div>
    )
  }
}
ReactDOM.render(
  <RatingStar />,
  document.getElementById('root')
)
export default RatingStar;

还有一个特别广泛的用法，JSX里面跑循环，

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class RatingStar extends Component {
  render() {
    const arrGood = ['高', '富', '帅'];
    const listItem = arrGood.map((good,index) =>
      <li key={index}>
        {good}
      </li>
    );
    return (
      <div id="box">
          <ul>{listItem}</ul>
      </div>
    )
  }
}

ReactDOM.render(
  <RatingStar />,
  document.getElementById('root')
)
export default RatingStar;

会这些就够用了。

就记住一点就行，在JSX内写JS，须要{}包起来。

在后面遇到JSX和ES6和组件中传递数据等结合的使用，容易跟解构析构混淆，可是你们记住上面的东西就不会出错了。

结语:

咱们来回顾下，作个总结：

1. JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并非 HTML。
2. JSX是用来描述你的组件长什么样的。
3. JSX 在编译的时候会变成相应的 JavaScript 对象描述。
4. react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，而且渲染到页面上。
5. JSX中JS代码的应用的规则。