首頁猿問反應(yīng)功能性無狀態(tài)組件，PureCo...

反應(yīng)功能性無狀態(tài)組件，PureComponent，Component；有什么區(qū)別

React.JS JavaScript

皈依舞 2019-10-14 10:22:14

從React v15.3.0開始，我們有了一個名為PureComponent的新基類，以擴(kuò)展內(nèi)置的PureRenderMixin。我了解的是，在幕后，它對內(nèi)部的道具進(jìn)行了比較淺的比較shouldComponentUpdate?，F(xiàn)在，我們有3種方法來定義React組件：功能性無狀態(tài)組件，不擴(kuò)展任何類擴(kuò)展PureComponent類的組件擴(kuò)展Component類的常規(guī)組件一段時間以前，我們曾經(jīng)將無狀態(tài)組件稱為“純組件”，甚至稱為“啞組件”。似乎“純”一詞的整個定義現(xiàn)在已經(jīng)在React中改變了。盡管我了解這三者之間的基本區(qū)別，但仍不確定何時選擇。另外，每種性能對性能有何影響和權(quán)衡？更新：這些是我希望得到澄清的問題：我應(yīng)該選擇將簡單的組件定義為功能性的（出于簡化的目的）還是擴(kuò)展PureComponent類的（出于性能的考慮）？我為失去的簡單性而獲得了真正的性能提升嗎？Component當(dāng)我總是可以使用PureComponent以獲得更好的性能時，是否需要擴(kuò)展常規(guī)類？

查看完整描述

3 回答

慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗獲得超8個贊

我不是反應(yīng)超常的天才，但據(jù)我了解，我們可以在以下情況下使用每個組件

無狀態(tài)組件- 這些組件沒有生命周期，因此應(yīng)在呈現(xiàn)父組件的重復(fù)元素時使用這些組件，例如呈現(xiàn)僅顯示信息且沒有任何動作要執(zhí)行的文本列表。
純組件-這些是具有生命周期的項目，并且在給出一組特定的道具時，它們將始終返回相同的結(jié)果。當(dāng)顯示結(jié)果列表或不包含復(fù)雜子元素的特定對象數(shù)據(jù)時，可以使用這些組件，并用于執(zhí)行僅影響自身的操作。這樣的顯示用戶卡列表或產(chǎn)品卡列表（基本產(chǎn)品信息），并且用戶只能執(zhí)行的操作是單擊以查看詳細(xì)信息頁面或?qū)⑵涮砑拥劫徫镘嚒?/p>
普通組件或復(fù)雜組件-我使用了術(shù)語“復(fù)雜組件”，因為它們通常是頁面級組件，由許多子組件組成，并且由于每個子組件都可以以自己獨(dú)特的方式運(yùn)行，因此您不能百分百確定它會在給定狀態(tài)下呈現(xiàn)相同的結(jié)果。正如我通常所說的，這些應(yīng)該用作容器組件

反對回復(fù) 2019-10-14

慕萊塢森

TA貢獻(xiàn)1810條經(jīng)驗獲得超4個贊

React.Component是默認(rèn)的“常規(guī)”組件。您可以使用class關(guān)鍵字和聲明它們extends React.Component。將它們視為具有生命周期方法，事件處理程序和任何方法的類。
React.PureComponent是使用功能對其和進(jìn)行淺表比較的函數(shù)React.Component實(shí)現(xiàn)的。你必須使用，如果你知道的組件具有改變的道具或狀態(tài)嵌套的數(shù)據(jù)，你想重新呈現(xiàn)。因此，如果當(dāng)您作為道具傳遞或設(shè)置為狀態(tài)的數(shù)組或?qū)ο蟀l(fā)生變化時需要重新渲染組件，則它們并不是很好。shouldComponentUpdate()propsstateforceUpdate()
功能組件是沒有生命周期功能的組件。它們據(jù)說是無狀態(tài)的，但是它們是如此干凈整潔，以至于我們現(xiàn)在有了鉤子（自React 16.8起），因此您仍然可以擁有狀態(tài)。所以我想它們只是“干凈的組件”。