Когда вы работаете с React и имеете несколько экземпляров одного и того же компонента, управление состоянием может оказаться затруднительным. В зависимости от того, как ваши компоненты должны взаимодействовать, вы захотите по-разному обрабатывать состояние. Вот что я обнаружил, работает хорошо.

Независимые экземпляры: сохраняйте состояние внутри компонента

Если вашим компонентам не нужно взаимодействовать друг с другом, лучше всего хранить их состояние внутри компонента. Таким образом, каждый экземпляр имеет свое собственное состояние, и изменения в одном не влияют на другие.

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

  return (
    

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

// Usage
 // Instance 1
 // Instance 2

Здесь каждый компонент счетчика отслеживает свое собственное количество. Таким образом, если вы нажмете кнопку на одном счетчике, это не изменит счетчик на другом.

Зависимые экземпляры: управление состоянием в родительском компоненте

Но если компонентам необходимо иметь общее состояние или работать скоординировано, лучше перенести состояние в родительский компонент. Родитель может управлять общим состоянием и передавать его в качестве реквизита. Это гарантирует синхронизацию всех экземпляров и бесперебойную совместную работу.

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

  return (
    

      
Total Count: {sharedCount}
      
  );
}

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

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

Этот подход работает, поскольку, когда состояние находится в родительском компоненте, любое обновление этого состояния вызывает повторную отрисовку всех экземпляров, гарантируя, что все они отображают новейший пользовательский интерфейс. Если бы состояние сохранялось в каждом экземпляре отдельно, повторно отображался бы только экземпляр с измененным состоянием, что приводило бы к несогласованному пользовательскому интерфейсу между экземплярами.

Примеры из моих проектов

Я понял это, когда создавал компонент аккордеона. Вот два примера из моей собственной работы:

• Независимые экземпляры аккордеона: пример. В этой настройке каждый экземпляр аккордеона работает независимо.

• Зависимые экземпляры аккордеона: пример. В этой версии все экземпляры аккордеона зависят друг от друга и синхронизируются.

Краткий обзор

• Если компоненты работают отдельно, сохраняйте состояние внутри каждого компонента.

• Если им нужно совместно использовать состояние или работать вместе скоординировано, управляйте состоянием в родительском элементе.

Этот подход имел для меня большое значение при создании этих примеров аккордеона. Надеюсь, это поможет и вам!