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

  1. Поскольку они являются чистыми функциями, ваши утверждения очень просты, и мы все знаем, что написание модульного теста для компонентов с состоянием довольно хлопотно, и поэтому простые функциональные компоненты обычно предпочтительнее.
  2. Во-вторых, можно избежать всех раздражающих и запутанных особенностей использования ключевого слова Javascript this. Весь компонент становится более понятным без ключевого слова this.
  3. Легко понять! Когда вы видите функциональный компонент без состояния, вы понимаете, что это просто функция, которая принимает свойства и выдает HTML.

Начиная с React 16.8, в React появились хуки, и мы можем использовать функции хуков состояния реакции внутри компонентов без состояния. React hook — это специальная функция, которая позволяет вам «подключаться» к функциям React.

useState — это хук, который позволяет легко добавлять состояние реакции к компонентам функции. Давайте посмотрим на официальный пример из Facebook.

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

Вы могли заметить квадратные скобки! Деструктуризация массива — классная функция, появившаяся вместе с ES6. По сути, это выражение помогает вам сделать возможным распаковку значений из массивов или свойств из объектов в отдельные переменные. Поэтому вы можете назвать их как угодно.

const a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Таким образом, в вашем компоненте без состояния, вызывая хук useState, он объявляет «переменную состояния». Наша переменная называется count

Единственным аргументом useState() является начальное состояние, и оно не обязательно должно быть объектом, и оно возвращает пару значений: текущее состояние и функцию, которая его обновляет точно так же, как функция setState.

Довольно проста в использовании ха? давайте теперь конвертируем ваши компоненты в state-less!