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

Где использовать

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

Почему мы предпочитаем крючки

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

преимущества использования функционального компонента

• Это позволяет избежать ненужного использования наследования, которое мы обычно используем в компоненте класса.
• следовательно, нет необходимости объявлять конструктор или вызывать super.
• Нет необходимости привязывать функции к этому контексту компонента.

использование состояния

В основном используется для создания переменной состояния, а также для предоставления функции для изменения состояния. Его можно использовать любое количество раз.

const [имя, setName] = useState («Раджив»)

использованиеЭффект

Этот хук можно использовать для трех жизненных циклов: componentDidMount, componentDidUpdate и componentWillUnmount. Его можно использовать несколько раз в компоненте.

useEffect ( ()=>{console.log('это будет работать как componentDidMount');}, [])

useEffect ( ()=>{console.log('это будет работать как componentDidUpdate');}, [имя])

использоватьЭффект ( ()=>{

return ()=>{console.log('это будет работать как componentWillUnmount'); }

}, [ ])

Крючки для редукса

Как и в случае с react, библиотека react-redux также предоставляет некоторые хуки для упрощения реализации redux. Посмотрим на них -

использованиеселектор

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

const postsList = useSelector (store => store.posts.postsData)

Как вы можете видеть в приведенном выше примере, useSelector принимает обратный вызов, который содержит store в качестве параметра, и мы можем выбрать желаемые данные для возврата из него. Здесь мы взяли postData из хранилища в виде списка сообщений, затем мы можем использовать его для отображения с помощью карты.

использованиеОтправка

Он используется для отправки действия непосредственно из компонента реакции. Ранее нам нужно было использовать либо диспетчеризацию из подключения , либо mapDispatchToProps с помощью bindActionCreators .

константная диспетчеризация = useDispatch();

Как видно из приведенного выше примера, useDispatch возвращает функцию отправки. Здесь мы отправили действие addPost при нажатии кнопки «Добавить».

вывод

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