React Хуки (Hooks) необходимы, чтобы ваш проект имел чистый код. React был представлен миру около 5 лет назад и по сей день сохраняет статус одной из самых используемых интерфейсных библиотек JS. React настолько популярен, что я прямо сейчас, в процессе написания данной статьи, заработал + 132 000 звезд на GitHub.
Основная концепция реакции основана на компонентах. Это позволит вам писать повторно используемые коды и сделать ваш проект чистым. Как вы знаете, в React есть 2 типа компонентов: на основе классов и функциональные компоненты. Компоненты на основе классов несколько старше функциональных компонентов.
Но функциональные компоненты чище, быстрее классов. Итак, React представил хуки. Хуки — это то, что позволяет писать функциональные компоненты и при этом подключаться к функциям на основе классов и использовать их. Благодаря React Hooks мы способны писать куда более чистые и простые компоненты с использованием функций, и в нашем арсенале по-прежнему остаются замечательные возможности компонентов на основе классов, такие как состояния и логика с отслеживанием состояния!
Почему мы должны использовать React Хуки (Hooks) и функциональные компоненты?
Если вы сами пройдетесь по документации и почитаете о хуках и функциональных компонентах, у вас не останется сомнений в необходимости их использования. Но позвольте упростить задачу – я покажу несколько реальных примеров, и мы вместе разберем причины использования, а в качестве бонуса сэкономим ваше время в будущем.
В качестве первой причины отмечу, что код меньше и чище мы хотим создать компонент, который отображает заголовок и подзаголовок. Вот пример написания по классам:
class Header extends React.Component{
render() {
return(</pre>
<div>
<h1>Заголовок</h1>
<h4>Подзаголовок</h4>
</div>
<pre>);
}
}
А теперь внимание на пример функционального компонента:
const Header = () => (</pre> <div> <h1>Заголовок</h1> <h4>Подзаголовок</h4> </div> <pre>);
Очевидно, который из них чище, не так ли?
Иерархия и логика с отслеживанием состояния
Как упоминается в документации (https://ru.reactjs.org/docs/hooks—intro.html ), к сожалению, React не обладает возможностью «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Что это значит? Представьте 3 компонента, каждый из которых содержит форму, а каждая форма содержит имя. Вы сохраняете значение вашего ввода в состоянии этих компонентов. Итак, у вас есть 3 компонента на основе классов с состоянием (включая имя) и обработчиком handleNameChange. И вот, вы начинаете писать один и тот же код снова и снова, каждый раз, когда хотите использовать поле имени в своем проекте.
Но долой этот мазохизм – просто используйте хуки! Напишите один хук и импортируйте его в любой функциональный компонент – так вы сможете использовать имя и поведение его обработчика.
Третья причина. Компоненты на основе классов сложны? Безусловно, черт возьми! Когда вы хотите написать компонент на основе классов, вам необходимо понимать основные концепции слова «this», жизненные циклы, такие как componentDidMount или componentDidUpdate, и тому подобное. Тем временем в функциональных компонентах люди просто работают с функциями! Специально стрелочные функции. Отсутствует не только «this» и привязка, но также и состояние, и жизненный цикл! А что, если мы хотим получить API после монтирования нашего компонента или, к примеру иметь формы и выполнять проверку и что-то с их значением в состоянии? Заволновались? Да не переживайте вы так, все просто. Всегда можно использовать хуки useState вместо состояний и setState, и Effect вместо методов жизненного цикла.
Определение useState
А теперь дадим время еще нескольким простым практическим примерам, на этот раз для ответа на вопрос: как же мы собираемся работать с useState в react?
import React, { useState } from 'react';
function Example() {
// Декларация новой переменной состояния "count"
const [count, setCount] = useState(0);
return (</pre>
<div>Вы нажали {count} раз <button> setCount(count + 1)}></button> Нажми меня!</div>
<pre>);
}
Это пример документации React для useState и отсчет с нуля при нажатии на кнопку. Тип кода класса тоже здесь:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (</pre>
<div>Вы нажали {this.state.count} раз <button> this.setState({ count: this.state.count + 1 })}></button> Нажми меня!</div>
<pre>);
}
}
Здесь вы можете увидеть useState (), count, setCount и некоторые скобки.
UseState ():
Это функция, предоставляемая командой React в библиотеке React, и ее следует для начала импортировать. UseState() возвращает массив, аргументом которого является начальное значение состояния.
Count:
Это имя нашей переменной в состоянии.
SetCount:
Это функция, которая реализует нашу логику с отслеживанием состояния. Значение setCount — это новое значение нашего состояния.
Скобки:
А вот это уже простая деструктуризация массива. Как я упоминал выше, каждый useState () возвращает массив. Так, используя эту скобку, мы применяем первое значение массива ([0]) как значение нашего состояния, а второе ([1]) — это метод, который мы определяем для изменения нашего состояния. Поэтому здесь мы говорим, что у нашего компонента есть состояние, которое включает счетчик, и мы хотим обрабатывать его изменения с помощью метода setCount.
Некоторые примеры useState и наши собственные хуки
Теперь я покажу вам полезную реализацию useState. В этом примере мы моделируем хуки с помощью useState, поэтому здесь вы также сможете увидеть возможность повторного использования и гибкость хуков. Возьмем за основу факт того, что мы хотим иметь счетчик, у которого будет начало, шаг, счет и конец при нажатии кнопки. Это основная составляющая:
export const CounterDemo = () => {
const [count, handleCount] = useCounter(100, 130,5);
return (</pre>
<div>{count} <button>Count</button></div>
<pre>);
};
Заметим, что useCounter — это настраиваемый хук, который принимает те самые 3 аргумента: start, finish и step.
Деструктуризация нашего массива означает, что хук возвращает массив, первый элемент которого является значением count, а второй — методом изменения состояния (наша логика состояния). Мы используем этот метод с произвольным именем handleCount в качестве обработчика события onClick.
Теперь пришло время увидеть нашу собственную реализацию Хука:
import {useState} from 'react';
export const useCounter = (start, finish, step) => {
// Наше состояние
const [count, setCount] = useState(start);
// handleCount условие
const handleCount = () => {
if (count === finish) {
return setCount(start);
} else {
return setCount(count + step);
}
};
//Return our custom hook array
return [count, handleCount]
};
Весь этот код условно можно разбить на три части:
- Определение нашего состояния: у нас есть переменная count в нашем состоянии, начальное значение которой равно значению «start», и мы хотим изменить это состояние с помощью метода setCount.
- Реализация метода handleCount. Воспользовавшись условием с целью проверить, достигли мы финишной суммы или нет, за дело возьмется метод setCount, чтобы изменить значение count в соответствии с результатом условия if.
- Возвращаем наш настраиваемый массив хуков: как вы видите, первое — это значение count, а второе – наш метод handleCount.
React Хуки (Hooks) — почему их стоит использовать?
Все, что описано в этой статье, является базовой и ключевой концепцией React хуков для новичков и разработчиков, которые боятся изменений. Вы можете узнать больше о вопросе использования хуков в документации React и из других источников.
Однако! Хуки использовать вовсе не обязательно. Команда React не оказывает на вас никакого давления с целью перенести и/или преобразовать ваш код для использования хуков.
Также, с целью глубже изучить производительность функциональных компонентов и компонентов на основе классов, вы можете прочитать замечательную статью Филиппа Лео: «Функциональные компоненты React на 45% быстрее, теперь» https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f
И в качестве «вишенки на торте», настоятельно рекомендую подробно ознакомиться с некоторыми важными правилами использования хуков в этой статье в официальных документах: Rules of Hooks https://reactjs.org/docs/hooks-rules.html
Изучив хуки в полной мере, вы непременно познаете их мощь и незаменимость в написании React проектов.
Также, вам может быть интересна статья на тему javascript: работа примитивов JS
