react中的狀態與無狀態功能組件

React：構建交互式用戶界面的核心組件

React是一個流行的JavaScript前端庫，用於構建交互式用戶界面。它學習曲線相對平緩，這也是它最近備受關注的原因之一。

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

先決條件

本教程面向剛開始學習React並需要更好地了解組件的初學者。我們將從組件基礎開始，然後逐步深入更具挑戰性的概念，例如組件模式以及何時使用這些模式。我們將涵蓋不同的組件分類，例如類組件與函數組件、有狀態組件與無狀態組件以及容器組件與展示組件。

讓我們開始吧！

什麼是組件？

組件是自包含的、獨立的微型實體，用於描述UI的一部分。應用程序的UI可以拆分成更小的組件，每個組件都有其自己的代碼、結構和API。

例如，當您查看Facebook的Web應用程序時，它擁有數千個相互連接的功能部件。有趣的是：Facebook包含30,000個組件，並且數量還在不斷增長。組件架構允許您獨立地思考每個部件。每個組件都可以更新其作用域內的所有內容，而無需擔心它如何影響其他組件。

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

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

<code><div>
<br>    當前計數：{count}<br><hr>
<br>    {/* 組件可重用性示例*/}<br>            updateCount = {setCount(count 1)}/><br>            updateCount = {setCount(count-1)}/><br>
</div>
<br></code>

Props和State

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

理解props

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

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

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

然後，您可以使用setCount()獲取當前計數。

類組件

類組件可能比函數組件更複雜，但有些人更喜歡這種風格。

您可以通過擴展super()來創建一個類組件，以傳遞從父類繼承的內容。

請注意，在定義組件時，構造函數是可選的。在上述情況下，組件沒有狀態，並且構造函數似乎沒有執行任何有用的操作。 props。

最佳實踐是建議為所有類組件使用構造函數。

此外，如果您使用構造函數，則需要調用super( super() call in constructor”。

我的最後一點是關於如果您使用鉤子或this.setState()來更新狀態，則使用count和count變量。 useState()鉤子返回第二個函數，允許您使用新值更新狀態。

 <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()接受一個對像作為輸入，我們將count的先前值增加1，這按預期工作。但是，有一個問題。當有多個setState()將計數增加100，然後將其更新為1，然後刪除之前添加的100時。如果setState()是異步的，並且多個prevState是先前狀態的引用，並且保證是最新的。 React.memo用於鉤子。當您剛接觸React時，所有這些聽起來可能有點令人困惑。如果保證給定相同的props和state時返回相同的結果，則稱組件為純組件。無狀態組件是純組件的一個很好的例子，因為給定一個輸入，您就知道將要渲染什麼。

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

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

 <code>// 类组件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 钩子<br>const MyComponent = React.memo(function MyComponent(props) { // 将组件函数包装在React.memo 中<br> // ...<br> });<br></code>

React.memo用於優化性能，除非您遇到某種性能問題，否則沒有理由考慮使用它們。

最後的想法

函數組件和鉤子通常比它們的類組件對應物簡單得多，因此，除非您有特殊偏好，否則函數組件是最佳選擇。

在本教程中，您對基於組件的架構和React中的不同組件模式有了一個高級概述。

這篇文章已更新，並包含了Jacob Jackson的貢獻。 Jacob是一位Web開發人員、技術作家、自由職業者和開源貢獻者。

以上是react中的狀態與無狀態功能組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！