Хуки были последним дополнением к React, доступным в React v16.8.0-alpha.1.
Хуки предоставляют «состояние» и другие реализации метода жизненного цикла реакции для функционального компонента, побуждая нас перейти к функциональным компонентам с более чистым кодом. Здесь я расскажу в основном об перехватчике состояния и перехватчике эффекта и о том, с чего начать работу с ними.
ГОСУДАРСТВЕННЫЙ КРЮК
На приведенном выше рисунке показаны три части:
АЛЬФА: это всего лишь одна из переменных состояния. Подобно тому, что мы создаем в компоненте на основе класса, например.
this.state = { isModalOpen: true }.
БЕТА. Это метод, который мы вызываем для обновления значения АЛЬФА. В компоненте на основе класса мы вызываем setState для обновления переменной состояния, но здесь у нас есть собственный пользовательский метод для обновления состояния.
ГАММА: это начальное значение, присвоенное переменной состояния.
Поэтому всякий раз, когда мы хотим обновить переменную состояния (альфа), мы просто вызываем функцию БЕТА и передаем значение, которое хотим присвоить. Нет необходимости в setState.
например setModalStatus(true) это обновит значение isModalOpen( Alpha ) до «true».
Давайте сделаем его более понятным для ситуации, когда будет более одной переменной состояния. Предположим, нам нужно хранить данные о собаках, такие как их имя, порода и владелец. Мы можем сделать это с помощью описанного выше подхода, т.е.
const [dogName, setDogName] = React.useState('Младший');
const [dogBreed, setDogBreed] = React.useState('Золотистый ретривер');
const [dogOwner, setDogOwner] = React.useState('Роберт');
Это будет беспорядочно, если задействовано большее количество переменных, поэтому, по моему мнению, лучший способ сделать это:
const [ myState, setMyState ] = React.useState({
dogName: «Юниор» ,
dogBreed: «Золотистый ретривер»,
владелец собаки: «Роберт»
});
и всякий раз, когда мы хотим обновить любой из них, все, что нам нужно сделать, это:
setMyState({…myState, dogName: ‘Джимми’, dogBreed: ‘Немецкая овчарка’} );
ЭФФЕКТ КРЮЧКА
Это позволяет нам выполнять побочные эффекты в функциональном компоненте. В основном это комбинация componentDidMount, componentDidUpdate и componentWillUnmount..
Мы можем использовать несколько эффектов в одном компоненте, а также можем привязать эффект к определенной переменной, будь то переменная состояния или любой реквизит.
useEffect(() =› {
setModalStatus(open);
}, [открыть]);
Вышеупомянутый эффект привязан к переменной «open» , поэтому при любом изменении значения «open» будет вызываться этот эффект. Благодаря этому мы можем лучше справляться с побочными эффектами, определяя несколько эффектов для разных переменных состояния или свойств.
Если мы передаем пустой массив в эффект, он вызывается только один раз. Это реализация componentDidMount .
useEffect(() =› {
// ComponentDidMount, вызывается только один раз.
}, []);
Вот и все, ребята, я надеюсь, что это дало вам достаточно, чтобы начать больше изучать плюсы и минусы хуков!
