17.05.2019 в 04:20

Зачем использовать React Hooks?

В наши дни все говорят о хуках React. Работа с ними требует небольшого изменения мышления, когда вы так долго работали с классами компонентов React. Команда React специально сказала, что они продолжат поддерживать классы, так зачем использовать хуки?

Рабочий пример

Пример, с которым мы работаем - это просто кнопка с активным состоянием. Переключает цвета при нажатии.

Поиграть с кодом можно тут

Начало

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

const Button = props => {
 return (
   
     {props.text}
   
 );
};

Хорошо отлично Мы можем передать пользовательский обработчик onClick и свойство text.

Но подождите ... что если мы захотим изменить цвет кнопки, когда она активна? Допустим, у нас уже есть 100 компонентов, использующих эту кнопку. Мы не хотим добавлять другое свойство, и изменение цвета кажется достаточно простым, чтобы позволить кнопке управлять.

Преобразование в класс

Единственная проблема в том, что нам понадобится какое-то состояние. Хорошо, давайте предположим, что это дни до реализации хуков. Теперь нам нужно преобразовать наш пример в класс, чтобы получить доступ к state:

class ButtonWithClass extends React.Component {
 state = {
   active: false
 };
 render() {
   return (
      {
         this.setState({active: !this.state.active});
         this.props.onClick();
       }}
     >
       {this.props.text}
     
   );
 }
}

Тьфу… нам пришлось полностью переписать наш компонент, добавить на 200% больше строк кода, и все, что мы хотели - это добавить одно состояние. Ваш PR-обозреватель увидит много красного и зеленого, и никому не нравится рождественский PR. Можем ли мы сделать лучше? Чертовски верно, мы можем.

Хуки нам на помощь!

Добавление хуков

Давайте посмотрим, что происходит, когда мы делаем то же самое с перехватчиками React:

const ButtonWithHook = props => {
 const [active, setActive] = useState(false);
 return (
    {
       setActive(!active);
       props.onClick();
     }}
   >
     {props.text}
   
 );
};

Посмотри на этот сексуальный компонент. Нам не нужно было ничего переписывать. Все, что мы сделали, это добавили несколько строк и обновили нашу функцию onClick, и мы получили тот же результат, что и версия класса. Не нужно ссылаться на this и беспокоиться о контексте. Мы счастливы, и наш PR-обозреватель счастлив. Для добавления состояния требуется только одна строка:

const [active, setActive] = useState(false)

Рефакторинг

Но подожди! Почему наша кнопка управляет своим собственным состоянием? Допустим, мы передумали и хотим, чтобы наш компонент был глупым, чтобы мы могли выглядеть умно. Мы хотим чтобы active был props, которым будут управлять ее родители. Нет проблем! При использовании React-Hooks нам просто нужно удалить строки 2 и 7 и часть строки 5:

const ButtonWithHook = props => {
 const [active, setActive] = useState(false); /***** DELETE *****/
 return (
    {
       setActive(!active); /****** DELETE ******/
       props.onClick();
     }}
   >
     {props.text}
   
 );
};

Это было так легко, что вы должны плакать от слез радости. Посмотрите, насколько сложно преобразовать наш класс обратно в функцию:

class ButtonWithClass extends React.Component { // restructure whole thing to be an arrow function again
 state = { // DELETE
   active: false // DELETE
 }; // DELETE
 render() { // DELETE
   return (
      {
         this.setState({ active: !this.state.active }); // DELETE
         this.props.onClick(); // remember to remove "this" context (you won't)
       }}
     >
       {this.props.text} //remember to remove "this" context again (you won't.. again)
     
   );
 } // DELETE
}

К тому времени, когда вы преобразуете свой компонент обратно в функцию, вы, вероятно, разочарованы. Человек, просматривающий ваш код, получит еще один пиар на тему Рождества, и вы будете чувствовать себя глупо, даже если фактическое изменение было незначительным. Вы говорите себе, что в следующий раз вы просто оставите это как класс на случай, если вы снова передумаете. Понятно, что мы должны были изменить строки 1, 2, 3, 4, 5, 8, 10, 11, 14 и 17. Если мы просто используем React Hooks, нам не нужно думать о состоянии, прежде чем писать наш компонент.

Резюме

React Hooks позволяют вам сохранять ваши функциональные компоненты как функции и привязывать состояние к специфическим функциям React. Вот и все. Такой простой, но такой мощный. Вот список преимуществ React Hooks (большинство из которых я, возможно, не охватил, я просто хотел поделиться тем, что я считаю наиболее очевидным преимуществом):

Ненужно переписывать, чтобы включить или исключить состояние, просто добавление / удаление строк.
Нет необходимости запоминать методы жизненного цикла с помощью useEffects (см. Здесь)
Настраиваемый и многократно используемый в компонентах в отличие от состояния компонента класса (подробнее здесь)
Гораздо чище код (подробности см. Здесь)
Никаких серьезных изменений (см. Здесь)

#React

1819

Войти на сайт