iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0

昨天介紹了可以在 component 中使用的 state,然而 React 一般建議能夠用越少 state 越好,因為 state 的改變是非同步的,state 變動也有可能造成不必要的重新渲染。那麼如果不能一直使用 state ,我們還能怎麼控制 component 的狀態? ---> 靠props

Child Component 子元件

現在我們已經學會了如何創建 component ,回想一下一開始 React 的介紹也有說過 React 的概念是由小元件組成大元件最後形成整個頁面,而這樣的架構勢必會出現像 HTML 一樣的父子層級關係。

其實在昨日的範例中我們已經學會怎麼建構父子關係了,還記得我們把 Counter 這個 component export 之後 import 到 App.js 這個 component 嗎? 做了這件事以後,App 就變成了 Counter 的父層,沒錯,就是這麼簡單!

https://ithelp.ithome.com.tw/upload/images/20190909/20113277BnEBfZ4iCA.png

Counter 元件被 App 元件引用,因此 Counter 成為 App 的子元件

那麼問題來了,在文章開頭有說過,可以使用 props 來取代 state 的部分功能,那 props 到底又是什麼呢? 又該怎麼實作它呢?

Props 概念介紹

Props 是 Properties 的縮寫,可以理解成由父層傳給子層的資料。

與 state 不同的地方是:
state 是讓元件控制自己本身的狀態
props 是讓外部元件對自己進行狀態配置
state 可以改變,而 props 卻是唯讀的,不能被改變。

在 React 中,資料流的方向是單一的,只能從上(父)往下(子)傳遞,因此實際的案例中比較常見的狀況是父層元件將自己的 state 傳給子元件當作子元件的 props,而子元件可以再將自己的 props 往下傳給它的子元件當作它的 props,如此形成多層的單向資料流。

不過昨天的 state 有說明如何更改 state,難道 props 就真的不能改動嗎 ?
props 本身是不能變動的,但別忘了我們的 props 也有可能是父元件的 state,而 state 是可以透過函式變更的,所以我們其中一個方法就是在父層把改變 state 的函式當作 props 傳給子元件,子元件透過 callback 呼叫該prop 函式,父元件的 state 因此更改後觸發 re-render,更新後的 state 值變成新的 props 傳下去給子元件引用。

聽到這裡想必很多人滿頭問號吧,我們直接透過程式碼來了解 props 概念:

App.js 父元件中
https://ithelp.ithome.com.tw/upload/images/20190910/20113277Z1v9FKcCl6.png
這邊把昨天 Counter.js 的 state 改成寫在 App.js 中,再當成 props 傳給 Counter,傳props的寫法很像 HTML tag 的 attribute,差別在因為變數是 JS 語法因此用大括弧包起來。

看看子元件 Counter.js
https://ithelp.ithome.com.tw/upload/images/20190910/201132779VWqjRi2rk.png
在參數中帶進 props ,它是一個物件,因此之後要使用的話改成 (ex:props.count、props.setCount),對應在父層取的 prop 名就可以了。

開啟網頁應該會看見跟昨天一樣內容的網頁,但差別是 counter 元件變成只顯示元素的 component。因為當專案慢慢擴大,狀態管理將變成非常麻煩與複雜,因此使用無狀態元件(stateless component)在某些時刻可以減緩管理狀態的複雜度。

今天的內容就到這裡了,明天將為大家介紹 props 的型別檢查機制,以減少開發時可能的錯誤,明天見!


上一篇
【Day 5】 第一個 hook - useState
下一篇
【Day 7】型別檢查 && PropTypes
系列文
React.js 從 【0】 到【1】推坑計畫 30

1 則留言

1
afjini
iT邦新手 5 級 ‧ 2019-09-11 22:45:46

哈哈哈終於有覺得懂props和state了 嗚嗚

感謝~

我要留言

立即登入留言