當您使用 react 并擁有同一組件的多個實例時，管理狀態(tài)可能會變得很棘手。根據(jù)組件需要交互的方式，您需要以不同的方式處理狀態(tài)。這是我發(fā)現(xiàn)效果很好的方法。
獨立實例：將狀態(tài)保留在組件內(nèi)部
如果您的組件不需要相互通信，最好將它們的狀態(tài)保留在組件內(nèi)。這樣，每個實例都有自己的狀態(tài)，其中一個實例的更改不會影響其他實例。
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ù)制
在這里，每個 counter 組件都會跟蹤自己的計數(shù)。因此，如果您單擊一個計數(shù)器中的按鈕，則不會更改另一個計數(shù)器中的計數(shù)。
依賴實例：管理父組件中的狀態(tài)
但是，如果組件需要共享某些狀態(tài)或以協(xié)調(diào)的方式工作，最好將狀態(tài)移至父組件。父級可以管理共享狀態(tài)并將其作為 props 傳遞下來。這可確保所有實例保持同步并順利協(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ù)制
這種方法之所以有效，是因為當狀態(tài)位于父組件中時，對該狀態(tài)的任何更新都會觸發(fā)所有實例的重新渲染，確保它們都顯示最新的 ui。如果將狀態(tài)單獨保存在每個實例中，則只有狀態(tài)發(fā)生更改的實例才會重新渲染，從而導(dǎo)致實例之間的 ui 不一致。
我的項目中的示例
我在構(gòu)建手風(fēng)琴組件時發(fā)現(xiàn)了這一點。這是我自己工作中的兩個例子：
獨立手風(fēng)琴實例：示例。在此設(shè)置中，每個手風(fēng)琴實例獨立工作。
依賴的手風(fēng)琴實例：示例。在此版本中，所有手風(fēng)琴實例相互依賴并保持同步。
快速回顧
如果組件單獨工作，請將狀態(tài)保存在每個組件內(nèi)。
如果他們需要共享狀態(tài)或以協(xié)調(diào)的方式一起工作，請在父級中管理狀態(tài)。
在構(gòu)建這些手風(fēng)琴示例時，這種方法對我產(chǎn)生了很大的影響。希望對你也有幫助！
