在 React 中管理相同元件的多個實例中的狀態

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

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

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
<Counter /> // Instance 1
<Counter /> // Instance 2

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

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

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

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

  return (
    <div>
      <p>Total Count: {sharedCount}</p>
      <Counter count={sharedCount} setCount={setSharedCount} />
      <Counter count={sharedCount} setCount={setSharedCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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

我的專案範例

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

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

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

快速回顧

• 如果組件單獨工作，請在每個組件內保留狀態。

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

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

以上是在 React 中管理相同元件的多個實例中的狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！