一文帶你了解React 純函式元件

所謂純函式，它是這樣一種函式：即相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的***。

從純函式的定義，可以提取出純函式的必要條件：

先來看個例子，做下對比：

let friend =
// 非純函式：會修改函式外變數 friend 的值
function()
}// 純函式：返回乙個新物件，且不會修改引數
function
(friend)
, friend)
copyfriend.message =
return copyfriend
}

通過上面的**，可以總結出純函式的優點：

所以，建議使用純函式來編寫函式。執行乙個純函式不需要擔心它會幹什麼壞事，它不會產生不可預料的行為，也不會對外部產生影響。不論什麼時候，相同的輸入必定是產出相同的輸出，而且使用純函式方便我們除錯和測試。

如果乙個元件沒有狀態（state），那麼元件的輸出方式，將完全取決於兩個引數：props和context，只要有相同的props和context，那麼他們的輸出絕對是相同的。將元件比喻成函式的話，相同的輸入(props和context) 永遠都會有相同的輸出：

// ...
render()

如上面**所示，props 是輸入，只要輸入相同，那麼輸出也一定相同。

使用純函式建立元件：

// function
function
title
(props)
<
/h1>
}// 箭頭函式
const
title=(
)=>
<
/div>

對比下使用類元件方式建立的元件：

// es6 類元件
class
title
extends
react.component
<
/h1>
}}

通過對比，純函式元件寫法簡單了，可以看出純函式元件的特點:

可以總結出純函式元件的優點：

當然，純函式元件也有自己的短板，它無生命週期，且沒有this。

純函式元件被鼓勵在大型專案中盡可能以簡單的寫法來分割原本龐大的元件，未來 react 也會像面向無狀態元件一樣在譬如無意義的檢查和記憶體分配領域進行一系列優化，所以只要有可能，盡量使用無狀態元件。

純函式不會產生不可預料的行為，建議合理的選擇純函式的方式書寫函式。同樣，在 react 元件中，如果無需本地 state 去快取一些資料，也不需要用到生命週期函式，那麼就可以把當前元件定義為純函式元件，可讀性好，且效能表現更佳。