React 元件的三種形式

[note: 本文基於 react v15.3.0+ 進行討論]

一般來說，編寫 react 元件的方式有以下三種：

無狀態元件（stateless component）。它是函式式的，不繼承於任何類；

繼承於purecomponent的元件；

繼承於component的元件，這也是最常使用的元件形式。

那麼，這三種形式的使用場景及優劣各是什麼呢？

無狀態元件是通過函式定義的，比如下面這個最簡單的?：

let hello = (props) => hello

呼叫的時候，和平常元件的使用方式相同：

可以看出，無狀態元件的最大特徵就是沒有內部狀態（廢話），所以無狀態元件的渲染結果完全取決於輸入的props。

無狀態元件的優點有以下幾個方面：

缺點有以下兩點：

這類元件的定義方式如下：

class mycomponent extends purecomponent

purecomponent是繼承於component類的，不同的是內部實現了shouldcomponentupdate的優化。它會淺比較元件內部props和state的值，從而決定元件應不應該重新渲染，purecomponent的使用可以提高 react 應用的效能。

在purecomponent中，我們不需要寫類似於

if (this.state.someval !== computedval) )
}

的**來避免元件被重複渲染。

讓我們看看原始碼，

當乙個元件是purecomponent時，會執行下面操作來檢查是否需要update：

if (type.prototype && type.prototype.ispurereactcomponent)

這裡用的也是淺比較（shallowequal），所以對於多層巢狀的物件和陣列中的變化都不會被檢測到。比如下面這個例子：

handleclick()  = this.state
items.push('new-item')
this.setstate()
}render()

假設itemlist是乙個purecomponent，因為它執行的是淺比較，所以this.state.items的變化是不會觸發itemlist的更新的。如果要觸發更新，應該使用setstate的另一種呼叫形式，每次都返回乙個新的物件：

handleclick() ));
}

最後需要注意的是，在purecomponent中是不能自己定義的shouldcomponentupdate()方法的。如果實在有這個必要，只能使用component元件。

沒啥說的，這就是最普通的元件形式。

從上面的討論我們可以得出結論，在 react 應用中，應當盡可能多的使用無狀態元件或purecomponent以增強復用性和提高效能。但是，在具體的專案實踐中，我們往往需要通過 ajax 請求獲取資料，並進一步對資料進行處理。為了使元件的職責更加單一，引入了容器元件(container component)的概念。我們可以將資料獲取以及處理的邏輯放在容器元件中，然後將已處理的資料傳遞給展示元件，使得元件的耦合性進一步地降低。

react-redux 中的connect()就是容器元件的一種具體實現。

React 元件的三種形式

React建立元件的三種方式

React三種建立元件的方式

React元件繫結this的三種方法

React 元件的三種形式

React建立元件的三種方式

React三種建立元件的方式

React元件繫結this的三種方法

相關推薦