【React.js入門 - 06】 JSX (下) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 6

Modern Web

給初入JS框架新手的React.js入門系列第 6 篇

【React.js入門 - 06】 JSX (下)

11th鐵人賽 reactjs javascript jsx

Andy Chang

2019-09-17 14:07:12

19975 瀏覽

分享至

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

這個系列和我在12屆鐵人賽的React.js系列文，已經在修訂後和深智數位合作出版成實體書，在天瓏開始預購了，想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

JSX的規定(接續前一篇)

6.在元素上傳遞屬性時若省略要指定的值，該資料會獲得`true`布林值

如果你要給的是布林值的true，可以只寫屬性名稱，直接省略要指定的值。
這樣講好像有點抽象(?)簡而言之，下面這兩個是相同的:

<button value={true} > 是 </button>
<button value > 是 </button>

7. 點擊(button)和輸入(input/textarea ...)事件

button

原本在純html，我們點擊按鍵時觸發的是onclick

<button value="true" onclick="myFunction(參數)">是</button>

在JSX改用駝峰法，也就是從onclick變成了onClick

<button value={true}  onClick={ }>是</button>

其他用來輸入的元素

另外像是input/textarea/select這類的元件，原本我們會透過用jQuery選取器或是DOM api去取得目前輸入值。在JSX中多加了一個功能:
當這些元素的輸入值被改變時，會觸發一個類似onClick的事件 - onChange。
這邊因為常會跟React一些語法配合，所以我們先知道有這件事就好，等到第26篇的時候會詳細來說。

<input type="text" onChange={ }/>

8. 函式綁定

原本我們在綁定函式在button/input/textarea的這種元件時，會這樣寫在html中:

<button value="true" onclick="myFunction(參數)">是</button>

而在JSX下，函式的綁定有兩種方法:

第一種，直接寫函式名稱，但去除括弧。
```
<button value={true}  onClick={ myFunction }>是</button>
```
函式的綁定和綁定資料一樣是使用{函式名稱}，在這種綁定方法下，只能綁一個函式，然而在輸入類的元件上有一些比較不一樣的地方。當button/input/textarea這類元件的互動事件(按下、輸入、選擇......)觸發時，函式只會接收到一個event類別的參數，並不能傳遞其他參數，如果我們要取得元素的value，就必須要透過原生DOM的event.target.value來取得。
例如，如果我們把index.js改成:
```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const getValue=(event)=>{
    console.log(event.target.value)
}


ReactDOM.render(
    <div>
        <button value={true} onClick={getValue}>按下以取得數值 </button>
    </div>,
    document.getElementById('root')
);
```
按下時，在F12的console就會印出true。
第二種，箭頭函式
```
<button value="true"  onClick={(e)=>{ myFunction1();myFunction2()} }>是</button>
```
在這種綁定方法下，就是以js語法定義一個新函式，想傳什麼參數、使用幾個函式、做什麼運算都可以。缺點是很容易讓版面看起來很亂，而且因為是在render創造一個新函式，每次渲染時都會創造一次，會影響效能，所以一般能用1的話就會用1的方法。
範例:
```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const getValue=(value)=>{
    console.log(value)
}


ReactDOM.render(
    <div>
        <button value={true} onClick={(event)=>{getValue(event.target.value)}}>
            按下以取得數值 
        </button>
    </div>,
    document.getElementById('root')
);
```
要注意的是，在這邊因為在綁定函式時已經把event.target.value放到參數，getValue函式接到的就是value的值，不用再去存取接到的參數的target的value。

9. 其他: 要注意的點

在JSX綁定js資料、函式時，一定要加上{}
剛開始很容易照以前的習慣直接用屬性="綁上去的東西"
這樣的話等同於在傳字串。

JSX是怎麼運作的?

實際上JSX語法會在Babel中
透過使用React定義的createElement函式編譯成一個物件
再丟入ReactDOM中
詳請可以參考React官方說明
https://reactjs.org/docs/introducing-jsx.html

小結: 自己對於JSX的看法

曾經被問過一個問題「你覺得三大框架，哪個比較好?」。自己使用過Vue和React，個人認為就JSX語法的影響而言，React對常在寫程式的人來說邏輯比較直觀，使用上很靈活，從程式進入點開始閱讀完一次程式碼大概就會了解程式的流程。但缺點是很容易JSX語法夾雜在js檔中的各處，這樣的結構對於新手來說比起「html、js、css分明的.vue檔」沒有那麼好理解，跟「框架」這個名詞比較難連結，沒設計好架構的話維護起來也會比較痛苦。我想這大概也是為什麼有一段時間大家總是覺得React比較難的原因之一吧。

講完了React所使用的JSX語法，下一篇開始，我們會講js框架的重點: 程式的元件化。