Как написать несколько ReactJS состояний на функциональных компонентах?

Question

После выпуска ReactJS версии 16.8 я ждал стабильной ситуации в моем проекте, поэтому теперь я хочу полностью перейти с компонентов класса на функциональные компоненты.

Но у меня есть некоторые проблемы с новым API-интерфейсом хуков, один из которых - как написать несколько состояний в компоненте. Я прочитал ReactJS документы о нескольких состояниях, как показано ниже:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Теперь моя идея выглядит следующим образом:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [state, setState] = useState({
    age: 42,
    fruit: 'banana',
    todos: [{ text: 'Learn Hooks' }],
  });

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

Answer 1

Нет правильного или неправильного в обоих подходах. Вы можете использовать состояние в обоих направлениях, и оно будет работать нормально.

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

Всегда трудно поддерживать и тестировать глубоко вложенный объект.

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

Вы можете создать свой собственный пользовательский хук и обрабатывать все состояния в пользовательском хуке.

Вы можете узнать больше о пользовательских хуках здесь .