React：構(gòu)建交互式用戶界面的核心組件

React是一個(gè)流行的JavaScript前端庫(kù)，用于構(gòu)建交互式用戶界面。它學(xué)習(xí)曲線相對(duì)平緩，這也是它最近備受關(guān)注的原因之一。

雖然有很多重要的概念需要學(xué)習(xí)，但組件無(wú)疑是React的核心。深入理解組件將使您的React開(kāi)發(fā)之旅更加輕松。

先決條件

本教程面向剛開(kāi)始學(xué)習(xí)React并需要更好地了解組件的初學(xué)者。我們將從組件基礎(chǔ)開(kāi)始，然后逐步深入更具挑戰(zhàn)性的概念，例如組件模式以及何時(shí)使用這些模式。我們將涵蓋不同的組件分類，例如類組件與函數(shù)組件、有狀態(tài)組件與無(wú)狀態(tài)組件以及容器組件與展示組件。

讓我們開(kāi)始吧！

什么是組件？

組件是自包含的、獨(dú)立的微型實(shí)體，用于描述UI的一部分。應(yīng)用程序的UI可以拆分成更小的組件，每個(gè)組件都有其自己的代碼、結(jié)構(gòu)和API。

例如，當(dāng)您查看Facebook的Web應(yīng)用程序時(shí)，它擁有數(shù)千個(gè)相互連接的功能部件。有趣的是：Facebook包含30,000個(gè)組件，并且數(shù)量還在不斷增長(zhǎng)。組件架構(gòu)允許您獨(dú)立地思考每個(gè)部件。每個(gè)組件都可以更新其作用域內(nèi)的所有內(nèi)容，而無(wú)需擔(dān)心它如何影響其他組件。

如果我們以Facebook的UI為例，搜索欄將是一個(gè)合適的組件候選者。Facebook的新聞Feed可以構(gòu)成另一個(gè)組件（或包含許多子組件的組件）。與搜索欄相關(guān)的所有方法和AJAX調(diào)用都將位于該組件內(nèi)。

組件也是可重用的。如果您需要在多個(gè)地方使用相同的組件，這很容易實(shí)現(xiàn)。借助JSX語(yǔ)法，您可以在任何需要顯示組件的地方聲明它們。

<code><div>
<br>????當(dāng)前計(jì)數(shù)：{count}<br>????<hr>
<br>????{/* 組件可重用性示例 */}<br>????????????updateCount = {setCount(count 1)}/><br>????????????updateCount = {setCount(count-1)}/><br>
</div>
<br></code>

Props和State

組件需要數(shù)據(jù)才能工作。您可以通過(guò)兩種不同的方式組合組件和數(shù)據(jù)：作為props或state。props和state決定組件的渲染方式及其行為。讓我們從props開(kāi)始。

理解props

如果組件是普通的JavaScript函數(shù)，那么props就是函數(shù)輸入。根據(jù)這個(gè)類比，組件接受輸入（我們稱之為props），處理它，然后渲染一些JSX代碼。

雖然props中的數(shù)據(jù)可供組件訪問(wèn)，但React的理念是props應(yīng)該是不可變的且自上而下的。這意味著父組件可以將任何它想要的數(shù)據(jù)作為props傳遞給子組件，但子組件不能修改其props。因此，如果您嘗試像下面這樣編輯props，您將收到“無(wú)法賦值給只讀”錯(cuò)誤。useState()鉤子使用方法如下：

<code>const [count,setCount] = useState(0);<br></code>

然后，您可以使用setCount()獲取當(dāng)前計(jì)數(shù)。

類組件

類組件可能比函數(shù)組件更復(fù)雜，但有些人更喜歡這種風(fēng)格。

您可以通過(guò)擴(kuò)展super()來(lái)創(chuàng)建一個(gè)類組件，以傳遞從父類繼承的內(nèi)容。

請(qǐng)注意，在定義組件時(shí)，構(gòu)造函數(shù)是可選的。在上述情況下，組件沒(méi)有狀態(tài)，并且構(gòu)造函數(shù)似乎沒(méi)有執(zhí)行任何有用的操作。props。

最佳實(shí)踐是建議為所有類組件使用構(gòu)造函數(shù)。

此外，如果您使用構(gòu)造函數(shù)，則需要調(diào)用super()，否則會(huì)報(bào)錯(cuò)“Missing super() call in constructor”。

我的最后一點(diǎn)是關(guān)于如果您使用鉤子或this.setState()來(lái)更新?tīng)顟B(tài)，則使用count和count變量。useState()鉤子返回第二個(gè)函數(shù)，允許您使用新值更新?tīng)顟B(tài)。

<code>// 這有效<br><br>// 鉤子<br>const [count,setCount] = useState(0);<br>setCount(count value);<br><br>// 類組件<br>handleCount(value) {<br>????this.setState({count: this.state.count  value});<br>}<br></code>

然后setCount()接受一個(gè)對(duì)象作為輸入，我們將count的先前值增加1，這按預(yù)期工作。但是，有一個(gè)問(wèn)題。當(dāng)有多個(gè)setState()將計(jì)數(shù)增加100，然后將其更新為1，然后刪除之前添加的100時(shí)。如果setState()是異步的，并且多個(gè)prevState是先前狀態(tài)的引用，并且保證是最新的。React.memo用于鉤子。當(dāng)您剛接觸React時(shí)，所有這些聽(tīng)起來(lái)可能有點(diǎn)令人困惑。如果保證給定相同的props和state時(shí)返回相同的結(jié)果，則稱組件為純組件。無(wú)狀態(tài)組件是純組件的一個(gè)很好的例子，因?yàn)榻o定一個(gè)輸入，您就知道將要渲染什么。

<code>const HelloWorld = ({name}) => (<br>?<div>{`Hi ${name}`}</div>
<br>);<br></code>

如果您的組件是純組件，則可以使用PureComponent對(duì)其進(jìn)行優(yōu)化。這些方法改變了React組件的更新行為。默認(rèn)情況下，React組件在狀態(tài)或props更改時(shí)始終更新。但是，如果您使用memo，React會(huì)對(duì)props和state執(zhí)行淺比較，這意味著您比較對(duì)象的直接內(nèi)容，而不是遞歸地比較對(duì)象的所有鍵/值對(duì)。因此，只比較對(duì)象引用，如果狀態(tài)或props被修改，這可能無(wú)法按預(yù)期工作。

<code>// 類組件<br>class MyComponent extends React.PureComponent  { // 使用它代替 React.Component<br>    // ...<br>}<br><br>// 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在 React.memo 中<br>    // ...<br>}); <br></code>

React.memo用于優(yōu)化性能，除非您遇到某種性能問(wèn)題，否則沒(méi)有理由考慮使用它們。

最后的想法

函數(shù)組件和鉤子通常比它們的類組件對(duì)應(yīng)物簡(jiǎn)單得多，因此，除非您有特殊偏好，否則函數(shù)組件是最佳選擇。

在本教程中，您對(duì)基于組件的架構(gòu)和React中的不同組件模式有了一個(gè)高級(jí)概述。

這篇文章已更新，并包含了Jacob Jackson的貢獻(xiàn)。Jacob是一位Web開(kāi)發(fā)人員、技術(shù)作家、自由職業(yè)者和開(kāi)源貢獻(xiàn)者。

以上是react中的狀態(tài)與無(wú)狀態(tài)功能組件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！