當您使用 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)生了很大的影響。希望對你也有幫助!