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

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

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

先決條件

本教程面向剛開始學(xué)習(xí)React並需要更好地了解組件的初學(xué)者。我們將從組件基礎(chǔ)開始，然後逐步深入更具挑戰(zhàn)性的概念，例如組件模式以及何時(shí)使用這些模式。我們將涵蓋不同的組件分類，例如類組件與函數(shù)組件、有狀態(tài)組件與無狀態(tà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)容，而無需擔(dān)心它如何影響其他組件。

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

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

<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ù)才能工作。您可以通過兩種不同的方式組合組件和數(shù)據(jù)：作為props或state 。 props和state決定組件的渲染方式及其行為。讓我們從props開始。

理解props

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

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

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

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

類組件

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

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

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

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

此外，如果您使用構(gòu)造函數(shù)，則需要調(diào)用super( super() call in constructor”。

我的最後一點(diǎn)是關(guān)於如果您使用鉤子或this.setState()來更新狀態(tài)，則使用count和count變量。 useState()鉤子返回第二個(gè)函數(shù)，允許您使用新值更新狀態(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è)問題。當(dāng)有多個(gè)setState()將計(jì)數(shù)增加100，然後將其更新為1，然後刪除之前添加的100時(shí)。如果setState()是異步的，並且多個(gè)prevState是先前狀態(tài)的引用，並且保證是最新的。 React.memo用於鉤子。當(dāng)您剛接觸React時(shí)，所有這些聽起來可能有點(diǎn)令人困惑。如果保證給定相同的props和state時(shí)返回相同的結(jié)果，則稱組件為純組件。無狀態(tài)組件是純組件的一個(gè)很好的例子，因?yàn)榻o定一個(gè)輸入，您就知道將要渲染什麼。

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

如果您的組件是純組件，則可以使用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被修改，這可能無法按預(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)化性能，除非您遇到某種性能問題，否則沒有理由考慮使用它們。

最後的想法

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

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

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

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