Хуки в React позволяют использовать состояние и другие функции React в функциональных компонентах. Почему это важно? Давайте сначала рассмотрим разницу между функциональным компонентом и компонентом класса. Функциональные компоненты, как следует из названия, предназначены для функций. Компоненты класса отвечают за отображение страницы и поддержание актуальности при любом взаимодействии. До появления хуков, если вы, например, хотели использовать состояние, вам нужно было создать компонент класса, но хуки это изменили.
Итак, теперь вы можете спросить себя, зачем вам писать функциональный компонент вместо компонента класса, если есть обходные методы (например, крючки и т. Д.), Чтобы преодолеть это препятствие? Проще говоря, код для функциональных компонентов намного более краток, содержит меньше кода и позволяет лучше разделить презентационные компоненты и компоненты контейнера.
В этом посте я сосредоточусь на двух хуках React: useState и useEffect.
useState
Помните, я сказал, что хуки позволяют использовать state? Вы бы использовали этот хук, если бы захотели именно этого.
useState позволяет использовать локальное состояние внутри функционального компонента. useState возвращает пару состояний, значение текущего состояния и значение «обновленного состояния», которое возникает в результате выполнения функции в функциональном компоненте. Он похож на this.setState, за исключением того, что this.setState объединяет прежнее и текущее новое состояние.
Давайте теперь углубимся в то, как использовать useState.
import React, { useState } from ‘react’
После этого давайте рассмотрим синтаксис ловушки useState.
const [state, setState] = useState(initialState)
Как я упоминал ранее, useState возвращает пару значений, текущее значение состояния и функцию, которая его изменяет. Первое значение, которое является состоянием, представляет текущее значение состояния. Второе значение, setState, представляет функцию, которая его изменяет. Затем мы устанавливаем его равным useState и сохраняем начальное состояние.
В качестве примера рассмотрим следующее изображение.
import React, { useState } from ‘react’;
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
В этой функции есть кнопка с хуком useState, который запускается в фоновом режиме при каждом нажатии. Начальное сохраненное значение - 0 и увеличивается на 1 в результате нажатия кнопки.
Теперь давайте посмотрим, как будет выглядеть аналог компонента класса.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Как видите, написано еще несколько строк кода. this.state со значением счетчика 0 является аналогом для useState, установленного в 0, в то время как this.setState будет вызываться вместо setCount, который затем принимает аргумент текущего состояния, увеличиваемого на 1.
Теперь давайте рассмотрим еще один популярный React Hook, useEffect.
useEffect
Помните, я говорил, что хуки позволяют использовать состояние и другие функции React в функциональных компонентах? Воспринимайте useEffect как комбинацию методов жизненного цикла componentDidMount, componentDidUpdate, componentWillUnmount.
Давайте посмотрим на следующий пример.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
В этом примере заголовок документа обновляется при каждом щелчке. Давайте теперь посмотрим на пример аналога класса.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Хотя аналог класса дает те же результаты, что и функциональный компонент, использование компонента класса в этом примере содержит больше строк кода, чем необходимо. Помимо написания дополнительных строк кода, вы можете видеть, что были написаны два разных метода жизненного цикла, с одним и тем же кодом в каждом, что противоречит DRY (Don't Repeat Yourself ) принцип.
Заключение
Кроме того, можно было построить свои собственные крючки. Если вы хотите провести больше исследований о пользовательских хуках или просто о хуках React в целом, я предлагаю ознакомиться с документацией по нему, поскольку я привел к ней ссылки внизу.
В общем, использование хуков в React упростит вашу жизнь. Хотя в них нет необходимости, они могут абсолютно сделать ваш код более кратким, СУХИМ и, как следствие, значительно улучшить читабельность вашего кода не только для вас, но и для других.
Источники:
