React 【組件和 JSX 】編寫React元素、創建組件、理解JSX、JSX規則、使用Fragments

目錄：

1. 編寫 React 元素

2. 創建組件

3. 理解 JSX

4. JSX 規則

5. 使用 Fragments

 

編寫 React 元素

打開 index.js，創建一個叫做的 element 的元素，用 h1 標簽將先要顯示的文字包裹。React 通過 ReactDom.render 方法將虛擬 DOM 加載到實際的瀏覽器頁面上，第一個參數是要渲染的 React 對象，第二個參數是頁面的目標位置。

頁面表現：

可以看到定義的 React 元素渲染到了頁面上

了解 React 元素

將上面例子中的 element 元素打印出來，在瀏覽器查看。

在控制台查看。可以看到打印出來一個 Object ，React 元素就是一個 JS 對象。Object 里面包含很多屬性，可以看到屬性 type 的值是 “h1”。屬性 props 里面還包含屬性 children，屬性 children 的值就是剛剛定義的文本內容“Hello React”。

 

創建組件

組件是構成 React 頁面的代碼片段，也是 React 最基本的組織界面的一個形式。

在 src 目錄下新建一個 components 文件夾，在 components 文件夾下新建 listItem.jsx，建議使用小駝峰命名法對組件進行命名，組件的后綴是 jsx。

定義組件

如果有下載 Simple React Snippets 插件，可以使用 imrc 與 cc 縮寫快速創建一個 React 模板。

定義一個 React 組件

引用組件

代碼中的 className="container" 作用是獲得 bootstrap 默認居中的樣式。

代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render( <App />, document.getElementById('root'));

import React, { Component } from 'react';

class ListItem extends Component {
    render() { 
        return ( <h1>我是小許</h1> );
    }
}
 
export default ListItem;

import React from 'react';
import './App.css';
import ListItem from './components/listItem'

function App() {
    return(
        <div className="container">
            <ListItem />
        </div>
    )
}

export default App;

頁面表現：

以上就是一個簡單的定義與引用組件的一個流程。

定義組件前的思考

1. 應用位置

　　確定組件在整個應用的位置是什么，在整個樹狀結構圖里面的位置是什么。它需要哪些子組件，它是哪個父組件的子組件，它的兄弟組件有哪些。

2. 確定參數

　　確定組件輸入的參數和哪些初始參數復用的場景。

3. 確定類型

　　確定組件的類型，是函數租組件還是 Class 組件。

4. 組件內容

　　思考組件會返回哪些內容。

 

理解 JSX

JSX 是 JavaScript XML 的縮寫。

JSX 是 JavaScript 的語法擴展，使用 XML 標記的方式直接聲明界面。

JSX 不是模板引擎語言

　　模板引擎語言有很多，比如 Angular、Vue 框架里帶的 template 的語法。JSX 不是模板引擎語言，他是帶語法糖的 AST（抽象語法樹），語法糖的處理放到了構建的階段，所以運行的時候不需要解析。

JSX 使用聲明式方式創建 UI ，處理 UI 邏輯。

JSX 遵循 JavaScript 語法，無學習門檻。

JSX 背后的理念：

　　React 認為渲染邏輯本質上其實是與其它 UI 在邏輯內部的耦合，比如，在 UI 中通常需要處理事件的綁定，或者在某些時刻需要發生變化要通知 UI，以及需要在 UI 中展示准備好的數據。React 並沒有采用將標記與邏輯分離到不同文件這種方式，而是采用將二者共同存放在稱之為組件這樣一個松散耦合的單元之中。

Babel :

　　實際上，JSX 就是 JavaScript。React 會通過第三方工具將 JSX 轉換成瀏覽器可以運行的 JS 代碼。如果通過腳手架搭建 React 本地的開發環境，腳手架中有一個自帶的內容 Babel，Babel 可以將 JSX 代碼轉換為正常可運行的代碼。下面演示一下 Babel 是如何將JSX 代碼轉換為正常可運行的代碼的。

訪問 babeljs.cn

點擊菜單欄中的 “ 試一試 ”，打開 Babel 在線編譯的頁面

可以看到預設勾選了es2015、stage-2、react，在左邊框框輸入 JSX 代碼，右邊框框會輸出瀏覽器可以運行的 JS 代碼。

 

JSX 規則

1. 在 JSX 中嵌入表達式，用 {} 包裹

2. 大寫開頭作為定義組件，小寫 tag 為原生 dom 節點

3. JSX 標簽可以有特定屬性和子元素

4. JSX 只能有一個根元素

例子

1. 在 JSX 中嵌入表達式，用 {} 包裹

index.js(React入口文件)：

導入 App.js，在頁面上渲染 App 組件。

App.js:

注冊引用組件 listItem.jsx

listItem.jsx:

粗紅框圈起的是用 { } 包裹的表達式，在頁面渲染出 product.price 的值

頁面表現：

可以進行算數運算，對 listItem.jsx 第 14 行進行修改。

{ product.price+10 }

頁面表現：

可以進行三目運算，對 listItem.jsx 第 14 行進行修改。

 { product.price<4 ? "便宜" : "貴" }

頁面表現：

還可以在函數內進行運算，將函數的返回值加載到 JSX 中的表達式即可。

頁面表現：

 

使用 Fragment

　　Fragment 是碎片的意思。React Fragment 就是使用 Fragment 標簽將子元素包裹在一起，但是渲染在 DOM 節點上的時候沒有額外的節點。

為什么使用 Fragment

● 可以包含並列的子元素

● 編寫表格組件，包裹子元素讓 html 生效

下面舉例對比說明為什么要使用 Fragment。

不使用 Fragment 的時候

相鄰的 JSX 元素必須被一個閉合標簽包裹。

修改上面例子中的 App.js，App.js:

報錯：

　　Line 7:9: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.


　　意思是相鄰元素必須被包裹在一個閉合標簽里。

報錯原因：

　　React 通過第三方工具 Babel 將 JSX 的內容轉換成瀏覽器可以識別的 JS 語句，轉換使用的方法是 React.createElement() 這個方法，這個方法的第一個參數是需要創建的元素的 type 屬性，type 屬性只能夠填寫一個，所以像上面代碼一樣並列兩個元素是不可以的，會讓 Babel 轉義的時候不知道對哪個元素進行轉義

解決方法：用一個 div 標簽將相鄰的兩個 React 元素包裹在一起。

修改代碼。App.js:

頁面表現：

查看頁面結構，可以看到有多余的 div 標簽。使用 Fragment 不會生成多余的 DOM 節點。

 

使用 Fragment 的時候

使用<React.Fragment></React.Fragment>標簽。

頁面表現：

可以看到少了多余的 div 標簽。

Fragment 有便利寫法，可以用<></>替代<React.Fragment></React.Fragment>，效果相同。