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代碼的應用的規則。