認(rèn)識JSX

? 這段element變量的聲明右側(cè)賦值的標(biāo)簽語法是什么呢？

? ? 它不是一段字符串（因?yàn)闆]有使用引號包裹）；

? ? 它看起來是一段HTML元素，但是我們能在js中直接給一個變量賦值html嗎？

? ? 其實(shí)是不可以的，如果我們將 type=“text/babel” 去除掉，那么就會出現(xiàn)語法錯誤；

? ? 它到底是什么呢？其實(shí)它是一段jsx的語法；

? JSX是什么？

? ? JSX是一種JavaScript的語法擴(kuò)展（eXtension），也在很多地方稱之為JavaScript XML，因?yàn)榭雌鹁褪且欢蝀ML語法；

? ? 它用于描述我們的UI界面，并且其完成可以和JavaScript融合在一起使用；

? ? 它不同于Vue中的模塊語法，你不需要專門學(xué)習(xí)模塊語法中的一些指令（比如v-for、v-if、v-else、v-bind）；

為什么React選擇了JSX

? React認(rèn)為渲染邏輯本質(zhì)上與其他UI邏輯存在內(nèi)在耦合

? ? 比如UI需要綁定事件（button、a原生等等）；

? ? 比如UI中需要展示數(shù)據(jù)狀態(tài)；

? ? 比如在某些狀態(tài)發(fā)生改變時，又需要改變UI；

? 他們之間是密不可分，所以React沒有將標(biāo)記分離到不同的文件中，而是將它們組合到了一起，這個地方就是組件（Component）；

? ? 當(dāng)然，后面我們還是會繼續(xù)學(xué)習(xí)更多組件相關(guān)的東西；

? 在這里，我們只需要知道，JSX其實(shí)是嵌入到JavaScript中的一種結(jié)構(gòu)語法；

? JSX的書寫規(guī)范：

? ? JSX的頂層只能有一個根元素，所以我們很多時候會在外層包裹一個div元素（或者使用后面我們學(xué)習(xí)的Fragment）；

? ? 為了方便閱讀，我們通常在jsx的外層包裹一個小括號()，這樣可以方便閱讀，并且jsx可以進(jìn)行換行書寫；

? ? JSX中的標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽；

? ? 注意：如果是單標(biāo)簽，必須以/>結(jié)尾；

JSX的使用

? jsx中的注釋

? JSX嵌入變量作為子元素

? ? 情況一：當(dāng)變量是Number、String、Array類型時，可以直接顯示

? ? 情況二：當(dāng)變量是null、undefined、Boolean類型時，內(nèi)容為空；

? ? 如果希望可以顯示null、undefined、Boolean，那么需要轉(zhuǎn)成字符串；

? ? 轉(zhuǎn)換的方式有很多，比如toString方法、和空字符串拼接，String(變量)等方式；

? ? 情況三：Object對象類型不能作為子元素（not valid as a React child）

? JSX嵌入表達(dá)式

? ? 運(yùn)算表達(dá)式

? ? 三元運(yùn)算符

? ? 執(zhí)行一個函數(shù)

React事件綁定

? 如果原生DOM原生有一個監(jiān)聽事件，我們可以如何操作呢？

? ? 方式一：獲取DOM原生，添加監(jiān)聽事件；

? ? 方式二：在HTML原生中，直接綁定onclick；

? **在React中是如何操作呢？**我們來實(shí)現(xiàn)一下React中的事件監(jiān)聽，這里主要有兩點(diǎn)不同

? ? React 事件的命名采用小駝峰式（camelCase），而不是純小寫；

? ? 我們需要通過{}傳入一個事件處理函數(shù)，這個函數(shù)會在事件發(fā)生時被執(zhí)行；

this的綁定問題

? 在事件執(zhí)行后，我們可能需要獲取當(dāng)前類的對象中相關(guān)的屬性，這個時候需要用到this

? ? 如果我們這里直接打印this，也會發(fā)現(xiàn)它是一個undefined

? 為什么是undefined呢？

? ? 原因是btnClick函數(shù)并不是我們主動調(diào)用的，而且當(dāng)button發(fā)生改變時，React內(nèi)部調(diào)用了btnClick函數(shù)；

? ? 而它內(nèi)部調(diào)用時，并不知道要如何綁定正確的this；

? 如何解決this的問題呢？

? 方案一：bind給btnClick顯示綁定this

? ? 方案二：使用 ES6 class fields 語法

? ? 方案三：事件監(jiān)聽時傳入箭頭函數(shù)（個人推薦）

事件參數(shù)傳遞

? 在執(zhí)行事件函數(shù)時，有可能我們需要獲取一些參數(shù)信息：比如event對象、其他參數(shù)

? 情況一：獲取event對象

? ? 很多時候我們需要拿到event對象來做一些事情（比如阻止默認(rèn)行為）

? ? 那么默認(rèn)情況下，event對象有被直接傳入，函數(shù)就可以獲取到event對象；

? 情況二：獲取更多參數(shù)

? ? 有更多參數(shù)時，我們最好的方式就是傳入一個箭頭函數(shù)，主動執(zhí)行的事件函數(shù)，并且傳入相關(guān)的其他參數(shù)；

React條件渲染

? 某些情況下，界面的內(nèi)容會根據(jù)不同的情況顯示不同的內(nèi)容，或者決定是否渲染某部分內(nèi)容：

? ? 在Vue中，我們會通過指令來控制：比如v-if、v-show；

? ? 在React中，所有的條件判斷都和普通的JavaScript代碼一致；

? 常見的條件渲染的方式有哪些呢？

? 方式一：條件判斷語句

? ? 適合邏輯較多的情況

? 方式二：三元運(yùn)算符

? ? 適合邏輯比較簡單

? 方式三：與運(yùn)算符&&

? ? 適合如果條件成立，渲染某一個組件；如果條件不成立，什么內(nèi)容也不渲染；

? v-show的效果

? ? 主要是控制display屬性是否為none

React列表渲染

? 真實(shí)開發(fā)中我們會從服務(wù)器請求到大量的數(shù)據(jù)，數(shù)據(jù)會以列表的形式存儲：

? ? 比如歌曲、歌手、排行榜列表的數(shù)據(jù)；

? ? 比如商品、購物車、評論列表的數(shù)據(jù)；

? ? 比如好友消息、動態(tài)、聯(lián)系人列表的數(shù)據(jù)；

? 在React中并沒有像Vue模塊語法中的v-for指令，而且需要我們通過JavaScript代碼的方式組織數(shù)據(jù)，轉(zhuǎn)成JSX：

? ? React中的JSX正是因?yàn)楹蚃avaScript無縫的銜接，讓它可以更加的靈活；

? 如何展示列表呢？

? ? 在React中，展示列表最多的方式就是使用數(shù)組的map高階函數(shù)；

? 很多時候我們在展示一個數(shù)組中的數(shù)據(jù)之前，需要先對它進(jìn)行一些處理：

? ? 比如過濾掉一些內(nèi)容：filter函數(shù)

? ? 比如截取數(shù)組中的一部分內(nèi)容：slice函數(shù)

 <script type="text/babel">
    // 1.定義App根組件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          students: [
            { id: 111, name: "why", score: 199 },
            { id: 112, name: "kobe", score: 98 },
            { id: 113, name: "james", score: 199 },
            { id: 114, name: "curry", score: 188 },
          ]
        }
      }

      render() {
        const { students } = this.state

        // 分?jǐn)?shù)大于100的學(xué)生進(jìn)行展示
        const filterStudents = students.filter(item => {
          return item.score > 100
        })

        // 分?jǐn)?shù)大于100, 只展示兩個人的信息
        // slice(start, end): [start, end)
        const sliceStudents = filterStudents.slice(0, 2)

        return (
          <div>
            <h2>學(xué)生列表數(shù)據(jù)</h2>
            <div className="list">
              {
                students.filter(item => item.score > 100).slice(0, 2).map(item => {
                  return (
                    <div className="item">
                      <h2>學(xué)號: {item.id}</h2>
                      <h3>姓名: {item.name}</h3>
                      <h1>分?jǐn)?shù): {item.score}</h1>
                    </div>
                  )
                })
              }
            </div>
          </div>
        )
      }
    }

    // 2.創(chuàng)建root并且渲染App組件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

列表中的key

? 我們會發(fā)現(xiàn)在前面的代碼中只要展示列表都會報一個警告：

? 這個警告是告訴我們需要在列表展示的jsx中添加一個key。

? ? key主要的作用是為了提高diff算法時的效率；

? ? 這個我們在后續(xù)內(nèi)容中再進(jìn)行講解；

JSX的本質(zhì)

? 實(shí)際上，jsx 僅僅只是 React.createElement(component, props, …children) 函數(shù)的語法糖。

? ? 所有的jsx最終都會被轉(zhuǎn)換成React.createElement的函數(shù)調(diào)用。

? createElement需要傳遞三個參數(shù)：

? 參數(shù)一：type

? ? 當(dāng)前ReactElement的類型；

? ? 如果是標(biāo)簽元素，那么就使用字符串表示 “div”；

? ? 如果是組件元素，那么就直接使用組件的名稱；

? 參數(shù)二：config

? ? 所有jsx中的屬性都在config中以對象的屬性和值的形式存儲；

? ? 比如傳入className作為元素的class；

? 參數(shù)三：children

? ? 存放在標(biāo)簽中的內(nèi)容，以children數(shù)組的方式進(jìn)行存儲；

? ? 當(dāng)然，如果是多個元素呢？React內(nèi)部有對它們進(jìn)行處理，處理的源碼在下方

createElement源碼

Babel官網(wǎng)查看

? 我們知道默認(rèn)jsx是通過babel幫我們進(jìn)行語法轉(zhuǎn)換的，所以我們之前寫的jsx代碼都需要依賴babel。

? 可以在babel的官網(wǎng)中快速查看轉(zhuǎn)換的過程：https://babeljs.io/repl/#?presets=react

直接編寫jsx代碼

? 我們自己來編寫React.createElement代碼：

? ? 我們就沒有通過jsx來書寫了，界面依然是可以正常的渲染。

? ? 另外，在這樣的情況下，你還需要babel相關(guān)的內(nèi)容嗎？不需要了

? ? 所以，type="text/babel"可以被我們刪除掉了；

? ? 所以，<script src="../react/babel.min.js"></script>可以被我們刪除掉了；

虛擬DOM的創(chuàng)建過程

? 我們通過 React.createElement 最終創(chuàng)建出來一個 ReactElement對象：

? 這個ReactElement對象是什么作用呢？React為什么要創(chuàng)建它呢？

? ? 原因是React利用ReactElement對象組成了一個JavaScript的對象樹；

? ? JavaScript的對象樹就是虛擬DOM（Virtual DOM）；

? 如何查看ReactElement的樹結(jié)構(gòu)呢？

? ? 我們可以將之前的jsx返回結(jié)果進(jìn)行打印；

? ? 注意下面代碼中我打jsx的打?。?/p>

? 而ReactElement最終形成的樹結(jié)構(gòu)就是Virtual DOM；

jsx – 虛擬DOM – 真實(shí)DOM

聲明式編程

? 虛擬DOM幫助我們從命令式編程轉(zhuǎn)到了聲明式編程的模式

? **React官方的說法：**Virtual DOM 是一種編程理念。

? ? 在這個理念中，UI以一種理想化或者說虛擬化的方式保存在內(nèi)存中，并且它是一個相對簡單的JavaScript對象

? ? 我們可以通過ReactDOM.render讓 虛擬DOM 和 真實(shí)DOM同步起來，這個過程中叫做協(xié)調(diào)（Reconciliation）；

? 這種編程的方式賦予了React聲明式的API：

? ? 你只需要告訴React希望讓UI是什么狀態(tài)；

? ? React來確保DOM和這些狀態(tài)是匹配的；

? ? 你不需要直接進(jìn)行DOM操作，就可以從手動更改DOM、屬性操作、事件處理中解放出來；

? 關(guān)于虛擬DOM的一些其他內(nèi)容，在后續(xù)的學(xué)習(xí)中還會再次講到；

階段案例練習(xí)

? 1.在界面上以表格的形式，顯示一些書籍的數(shù)據(jù)；

? 2.在底部顯示書籍的總價格；

? 3.點(diǎn)擊+或者-可以增加或減少書籍?dāng)?shù)量（如果為1，那么不能繼續(xù)-）；

? 4.點(diǎn)擊移除按鈕，可以將書籍移除（當(dāng)所有的書籍移除完畢時，顯示：購物車為空~）；

format.js

function formatPrice(price) {
  return "￥" + Number(price).toFixed(2)
}

data.js

const books = [
  {
    id: 1,
    name: '《算法導(dǎo)論》',
    date: '2006-9',
    price: 85.00,
    count: 1
  },
  {
    id: 2,
    name: '《UNIX編程藝術(shù)》',
    date: '2006-2',
    price: 59.00,
    count: 1
  },
  {
    id: 3,
    name: '《編程珠璣》',
    date: '2008-10',
    price: 39.00,
    count: 1
  },
  {
    id: 4,
    name: '《代碼大全》',
    date: '2006-3',
    price: 128.00,
    count: 1
  },
]

案例：文章來源地址http://www.zghlxwxcb.cn/news/detail-810144.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>購物車案例</title>
  <style>
    table {
      border-collapse: collapse;
      text-align: center;
    }

    thead {
      background-color: #f2f2f2;
    }

    td, th {
      padding: 10px 16px;
      border: 1px solid #aaa;
    }
  </style>
</head>
<body>
  
  <div id="root"></div>

  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/babel.js"></script>

  <script src="./data.js"></script>
  <script src="./format.js"></script>

  <script type="text/babel">
    // 1.定義App根組件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          books: books
        }
      }

      getTotalPrice() {
        const totalPrice = this.state.books.reduce((preValue, item) => {
          return preValue + item.count * item.price
        }, 0)
        return totalPrice
      }

      changeCount(index, count) {
        const newBooks = [...this.state.books]
        newBooks[index].count += count
        this.setState({ books: newBooks })
      }

      removeItem(index) {
        const newBooks = [...this.state.books]
        newBooks.splice(index, 1)
        this.setState({ books: newBooks })
      }

      renderBookList() {
        const { books } = this.state

        return <div>
          <table>
            <thead>
              <tr>
                <th>序號</th>
                <th>書籍名稱</th>
                <th>出版日期</th>
                <th>價格</th>
                <th>購買數(shù)量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {
                books.map((item, index) => {
                  return (
                    <tr key={item.id}>
                      <td>{index + 1}</td>
                      <td>{item.name}</td>
                      <td>{item.date}</td>
                      <td>{formatPrice(item.price)}</td>
                      <td>
                        <button 
                          disabled={item.count <= 1}
                          onClick={() => this.changeCount(index, -1)}
                        >
                          -
                        </button>
                        {item.count}
                        <button onClick={() => this.changeCount(index, 1)}>+</button>
                      </td>
                      <td><button onClick={() => this.removeItem(index)}>刪除</button></td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
          <h2>總價格: {formatPrice(this.getTotalPrice())}</h2>
        </div>
      }

      renderBookEmpty() {
        return <div><h2>購物車為空, 請?zhí)砑訒畘</h2></div>
      }

      render() {
        const { books } = this.state
        return books.length ? this.renderBookList(): this.renderBookEmpty()
      }
    }

    // 2.創(chuàng)建root并且渲染App組件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
  </script>

</body>
</html>

到了這里，關(guān)于【React基礎(chǔ)】– JSX語法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！