State in React - это действительно потрясающе.
Это дает вам возможность создавать компоненты, которые имеют возможность изменять свои значения в течение срока службы, тогда как свойства компонентов никогда не меняются. После того, как вы дадите компоненту опору, эта опора станет статической и не может быть изменена, если компонент не будет удален или повторно отрисован.
Хотя состояние потрясающее, оно доступно для использования только в компонентах, основанных на классах, а не в функциональных компонентах, однако React добавил «ловушки», с помощью которых функциональные компоненты могут изменять свое значение.
Что такое перехватчики React?
React Hook использует парадигму, аналогичную парадигме состояния класса, но только для функциональных компонентов ... он дает функциональным компонентам возможность изменять свои значения без необходимости быть классом.
Я создал простое приложение, чтобы показать, как работают React Hooks:
Вот единственный функциональный компонент моего приложения.
Он очень простой и содержит только «Экран» и кнопки 0–9 и ← для возврата.
Наша цель здесь состоит в том, чтобы, когда мы нажимаем одну из этих кнопок, она добавлялась к дисплею, а ← удаляла последний символ… Все просто, не так ли?
Собственно, ДА!
Вот наше приложение
Все кнопки работают так, как мы ожидаем… но как именно это работает?
Давайте углубимся в код
Перво-наперво, нам нужно импортировать useState из react
Эта строка кода отвечает за создание React Hook, мы используем деструктурирование, чтобы разбить массив useState на две отдельные переменные.
Первый элемент - это переменная, которую мы хотим изменить (аналогично тому, что вы хотели изменить в состоянии), а второй элемент в массиве - это функция, которая установит значение первого элемента (аналогично настройке состояния, но только для этой конкретной переменной).
Итак, мы создали переменную с именем text и функцию с именем changeText.
Если мы вызовем changeText с любым параметром, он изменит значение текста на этот параметр. Вот пример того
Затем нам нужно сделать наше пустое текстовое поле всеми нашими кнопками (кроме нашего обратного пространства), и каждая из них должна добавлять текущее значение текста при нажатии.
Как вы видите выше, у нас есть тег p с внутренним текстом нашей текстовой переменной, и каждая кнопка имеет событие onClick для вызова анонимной функции, которая будет использовать функцию changeText для установки значения текста.
Наконец, мы создаем нашу кнопку возврата, которая удаляет последний символ из текста при нажатии.
Какими бы крутыми ни были перехватчики React, между хуками и состоянием есть несколько существенных различий, о которых вам следует знать.
- Хуки работают ТОЛЬКО в функциональных компонентах и не работают в компонентах на основе классов.
- setState, используемый в классах, объединяет состояние, а хуки - нет. Например, когда вы используете setState и обновляете один ключ в State, состояние автоматически объединяется для вас. Однако, если у вас есть объект-перехватчик с несколькими ключами, и вы пытаетесь обновить один из ключей, он изменит этот ключ, однако он удалит остальные ключи, потому что он не объединяется. Хуки не такие умные, и вы должны дать функции параметр, указывающий, каким должно быть новое значение или атрибуты объекта.
Замечательно то, что вам НЕ НУЖНО использовать хуки, если вы не хотите, разработчики React заявили, что не планируют удалять классы из React, поэтому они делают React немного более функциональным и предоставляют разработчикам больше возможностей для как они хотят создавать свои приложения React.
