iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
Modern Web

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

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

這個系列和我在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下,函式的綁定有兩種方法:

  1. 第一種,直接寫函式名稱,但去除括弧。

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

    函式的綁定和綁定資料一樣是使用{函式名稱},在這種綁定方法下,只能綁一個函式,然而在輸入類的元件上有一些比較不一樣的地方。當button/input/textarea這類元件的互動事件(按下、輸入、選擇......)觸發時,函式只會接收到一個event類別的參數,並不能傳遞其他參數,如果我們要取得元素的value,就必須要透過原生DOMevent.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。

  2. 第二種,箭頭函式

    <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框架的重點: 程式的元件化。


上一篇
【React.js入門 - 05】 JSX (上)
下一篇
【React.js入門 - 07】 function component
系列文
給初入JS框架新手的React.js入門31

尚未有邦友留言

立即登入留言