當(dāng)您使用 react 并擁有同一組件的多個(gè)實(shí)例時(shí)，管理狀態(tài)可能會(huì)變得很棘手。根據(jù)組件需要交互的方式，您需要以不同的方式處理狀態(tài)。這是我發(fā)現(xiàn)效果很好的方法。
獨(dú)立實(shí)例：將狀態(tài)保留在組件內(nèi)部
如果您的組件不需要相互通信，最好將它們的狀態(tài)保留在組件內(nèi)。這樣，每個(gè)實(shí)例都有自己的狀態(tài)，其中一個(gè)實(shí)例的更改不會(huì)影響其他實(shí)例。
function counter() {
const [count, setcount] = usestate(0);
return (
<div>
<p>count: {count}</p>
<button onclick="{()"> setcount(count + 1)}>increment</button>
</div>
);
}
// usage
<counter></counter> // instance 1
<counter></counter> // instance 2
登錄后復(fù)制
在這里，每個(gè) counter 組件都會(huì)跟蹤自己的計(jì)數(shù)。因此，如果您單擊一個(gè)計(jì)數(shù)器中的按鈕，則不會(huì)更改另一個(gè)計(jì)數(shù)器中的計(jì)數(shù)。
依賴實(shí)例：管理父組件中的狀態(tài)
但是，如果組件需要共享某些狀態(tài)或以協(xié)調(diào)的方式工作，最好將狀態(tài)移至父組件。父級(jí)可以管理共享狀態(tài)并將其作為 props 傳遞下來。這可確保所有實(shí)例保持同步并順利協(xié)同工作。
function Parent() {
const [sharedCount, setSharedCount] = useState(0);
return (
<div>
<p>Total Count: {sharedCount}</p>
<counter count="{sharedCount}" setcount="{setSharedCount}"></counter><counter count="{sharedCount}" setcount="{setSharedCount}"></counter>
</div>
);
}
function Counter({ count, setCount }) {
return (
<div>
<p>Count: {count}</p>
<button onclick="{()"> setCount(count + 1)}>Increment</button>
</div>
);
}
登錄后復(fù)制
這種方法之所以有效，是因?yàn)楫?dāng)狀態(tài)位于父組件中時(shí)，對(duì)該狀態(tài)的任何更新都會(huì)觸發(fā)所有實(shí)例的重新渲染，確保它們都顯示最新的 ui。如果將狀態(tài)單獨(dú)保存在每個(gè)實(shí)例中，則只有狀態(tài)發(fā)生更改的實(shí)例才會(huì)重新渲染，從而導(dǎo)致實(shí)例之間的 ui 不一致。
我的項(xiàng)目中的示例
我在構(gòu)建手風(fēng)琴組件時(shí)發(fā)現(xiàn)了這一點(diǎn)。這是我自己工作中的兩個(gè)例子：
獨(dú)立手風(fēng)琴實(shí)例：示例。在此設(shè)置中，每個(gè)手風(fēng)琴實(shí)例獨(dú)立工作。
依賴的手風(fēng)琴實(shí)例：示例。在此版本中，所有手風(fēng)琴實(shí)例相互依賴并保持同步。
快速回顧
如果組件單獨(dú)工作，請(qǐng)將狀態(tài)保存在每個(gè)組件內(nèi)。
如果他們需要共享狀態(tài)或以協(xié)調(diào)的方式一起工作，請(qǐng)?jiān)诟讣?jí)中管理狀態(tài)。
在構(gòu)建這些手風(fēng)琴示例時(shí)，這種方法對(duì)我產(chǎn)生了很大的影響。希望對(duì)你也有幫助！
