當您使用 React 並擁有同一元件的多個實例時，管理狀態可能會變得很棘手。根據元件需要互動的方式，您需要以不同的方式處理狀態。這是我發現效果很好的方法。

獨立實例：將狀態保留在元件內

如果您的元件不需要相互通信，最好將它們的狀態保留在元件內。這樣，每個實例都有自己的狀態，其中一個實例的變更不會影響其他實例。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

// Usage
 // Instance 1
 // Instance 2

在這裡，每個計數器組件都追蹤自己的計數。因此，如果您單擊一個計數器中的按鈕，則不會更改另一個計數器中的計數。

依賴實例：管理父元件中的狀態

但是，如果元件需要共用某些狀態或以協調的方式運作，最好將狀態移至父元件。父級可以管理共用狀態並將其作為 props 傳遞下來。這可確保所有實例保持同步並順利協同工作。

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    

      
Total Count: {sharedCount}
      
      
    
  );
}

function Counter({ count, setCount }) {
  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

這種方法之所以有效，是因為當狀態位於父元件中時，對該狀態的任何更新都會觸發所有實例的重新渲染，確保它們都顯示最新的 UI。如果狀態單獨保存在每個實例中，則只有狀態發生變更的實例才會重新渲染，從而導致實例之間的 UI 不一致。

我的專案範例

我在建造手風琴組件時發現了這一點。這是我自己工作中的兩個例子：

• 獨立手風琴實例：範例。在此設定中，每個手風琴實例獨立工作。

• 依賴的手風琴實例：範例。在此版本中，所有手風琴實例相互依賴並保持同步。

快速回顧

• 如果元件單獨工作，則將狀態保存在每個元件內部。

• 如果它們需要共享狀態或以協調的方式一起工作，請在父級中管理狀態。

在建立這些手風琴範例時，這種方法對我產生了很大的影響。希望對你也有幫助！