Блог

Главная - Вопросы по программированию - Крючки реакции — useState для глобального управления состоянием

Крючки реакции — useState для глобального управления состоянием

#reactjs #react-redux #react-hooks #global-state

Вопрос:

Я знаю, что теперь существует контекстный API, который следует использовать для глобального управления состоянием приложения.

Но мне интересно, есть ли что-то неправильное (или не оптимальное) в управлении глобальным состоянием приложения с помощью useState и переходом к реквизитам, подобным этому?

 //App.js

function App() {

  const [counterA, setCounterA] =  useState(0);
  const [counterB, setCounterB] =  useState(0);

  let masterStates = {
    counterA: counterA,
    counterB: counterB,
  }

  let masterFunctions = {
    setCounterA: setCounterA,
    setCounterB: setCounterB,
  }


  return (
    <div>
      ...
      <ChildComponent masterStates={masterStates} masterFunctions={masterFunctions} />
      ...
    </div>
  )
  
}

Затем в моем дочернем компоненте я могу легко получить доступ к состоянию и обновить его следующим образом:

 //ChildComponent.js

function ChildComponent(props) {

  useEffect(() => {
    console.log("This will successfully log when counterA changes: ", props.masterStates.counterA);
  }, [props.masterStates.counterA]);

  return(
    <button onClick={() => props.masterFunctions.setCounterA(a => a   1)}>
      {props.masterStates.counterA}
    </button>
  )

}

Комментарии:

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

2. Контекстный API будет использоваться для распространения одних и тех же useState данных и функций настройки, поэтому в вашем подходе на самом деле нет ничего плохого, он просто становится ограниченным, как только у вас есть глубоко вложенные компоненты (предостережение, известное как сверление реквизита).

3. существует также проблема, что некоторые рендеры могут неожиданно повлиять либо на данные, либо, по крайней мере, на производительность… но, в конце концов… если это только два компонента (родитель/ребенок(и))… конечно… идите вперед и используйте только useState это . добавьте еще один, и это будет сложно, но выполнимо… больше, чем просто использовать context API

Ответ №1:

Спасибо за все проницательные комментарии! Это действительно помогло мне прояснить ситуацию.

Я не был знаком с этим термином «буровое бурение», но теперь он имеет большой смысл.

Я оставляю здесь несколько полезных ссылок для всех, кто хотел бы узнать немного больше об этом:

https://kentcdodds.com/blog/prop-drilling

https://www.geeksforgeeks.org/what-is-prop-drilling-and-how-to-avoid-it/

https://medium.com/analytics-vidhya/props-drilling-in-react-js-934120a4906b

Редактировать: Я только что нашел здесь эту статью, где он описывает подход, подобный моему, и излагает некоторые из его преимуществ.

https://dev.to/bytebodger/rethinking-prop-drilling-state-management-in-react-1h61

Метки: