React Hooks - Переход от класса к функциональным компонентам - Учебное пособие

РЕДАКТИРОВАТЬ: в наши дни хуки поставляются вместе с приложением Create-React-App. Вам больше не нужно вручную устанавливать версию React, чтобы использовать их.

Вы можете проверить, ничего ли не сломали.

Теперь весь наш код находится в папке src. Этот проект был создан с помощью create-react-app, поэтому структура каталогов довольно стандартная. В папке src вы найдете два подкаталога: компоненты и контейнеры. Компоненты нашего класса находятся в папке контейнеров: App.js и ErrorBoundary.js. Наши функциональные / не сохраняющие состояния / немые компоненты находятся в папке компонентов. Это просто условность.

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

Вот как сейчас выглядит наш App.js:

Первое, что мы хотим сделать, это преобразовать класс в функцию:

class App extends Component{
   //our code
   ...
}

должен стать…

function App(){
   //our code
   ...
}

… Или, если хотите…

const App = () => {
   //our code
   ...
}

Если у вас включен ES Lint, он, вероятно, начнет жаловаться на ваш конструктор. Это просто потому, что у функций нет конструкторов. Все, что мы делаем в нашем коде конструктора, - это инициализируем состояние, поэтому давайте быстро воспользуемся хуками для замены конструктора:

//Swap out named component import for useState from 'react'
import React, { useState } from 'react';

function App(){
   //replace constructor function with these lines
   const [robots, setRobots] = useState([]);
   const [searchField, setSearchField] = useState('');

   //extra code
   ...
}

useState - это ловушка, которая используется для назначения и управления локальным состоянием (памятью мыслей) для функционального компонента. В конструкторе обычно выполняются две вещи: инициализация состояния и привязка «this». Функциональные компоненты не нуждаются в "this", что делает привязку ненужной. useState, поэтому может легко заменить this.state, а также this.setState, устраняя необходимость в конструкторе. В основном это работает так:

const [statefulVar, statefulVarSetter] = useState(initialArgForStatefulVar)

Если приведенный выше синтаксис выглядит забавно, мы используем концепцию JavaScript под названием деструктуризация массива. Это удобный ярлык.

ES Lint теперь жалуется на наш componentDidMount метод. React Hooks предоставляет нам ловушку, которая легко заменяет три метода жизненного цикла: componentDidMount, componentDidUpdate и componentWillUnmount.

Передай привет useEffect. Мы можем использовать useEffect вместо componentDidMount в нашем коде следующим образом:

//remember to import useEffect
import React, { useState, useEffect } from 'react';

function App(){
   //replace constructor function with these lines
   const [robots, setRobots] = useState([]);
   const [searchField, setSearchField] = useState('');

   useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(res => res.json())
        .then(users => {
            //this.setState({ robots: users }) 
            //becomes:
            setRobots(users);
        });
   });

   //extra code
   ...
}

По сути, наш componentDidMount получил данные из API, преобразовал их в JSON (массив JSON) и присвоил этому массиву состояние robots с помощью this.setState. Мы делаем то же самое, но на этот раз используем setRobots.

useEffect просто берет функцию для запуска вместо componentDidMount и componentDidUpdate. Если у вас есть какая-либо функция, которую нужно очистить после компонента (что-то, что обычно должно быть в componentWillUnmount), просто верните эту функцию в конце useEffect. В этом небольшом примере нам не нужно этого делать.

Затем наш onSearchChange метод-обработчик может стать обычной функцией. Это уже стрелочная функция, поэтому давайте поставим перед ней const. Теперь мы изменим вызов this.setState внутри него, чтобы использовать метод установки, возвращаемый нашим обработчиком состояния. Вот что я имею в виду:

const onSearchChange = (event) => {
    setSearchField(event.target.value);
}

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

Вставьте вырезанный вами код, и теперь мы можем удалить строку, которая гласит: const { robots, searchField } = this.state;

Мы можем удалить его, потому что robots и searchField уже являются переменными с состоянием, к которым мы можем получить доступ напрямую благодаря нашим useState вызовам в начале функции App.

Следующий блок, который представляет собой объявление и определение filteredRobots, вообще не изменяется, поскольку мы уже напрямую ссылаемся на переменную robots. Вы можете потратить некоторое время, чтобы убедиться, что это правда.

Наконец, наш оператор return выводит некоторый JSX в зависимости от количества роботов в нашем массиве robots. Мы используем тернарный оператор, но логика преобразуется в:
если robots.length равно нулю (т.е. ложь), мы выводим на экран «Загрузка ...». Если это не так, мы визуализируем некоторые компоненты: SearchBox и CardList, заключенные в компоненты ErrorBoundary и Scroll.

Нам нужно изменить только одно. Измените свойство, переданное в компонент SearchBox, с this.onSearchChange на onSearchChange со ссылкой на функцию-обработчик. Помните, что наши функциональные компоненты не должны иметь дело с "this".

То, что было нашим return блоком, теперь выглядит так:

const filteredRobots = robots.filter(robot => {
    return robot.name.toLowerCase().includes(searchField.toLowerCase())
});

return !robots.length ?
    <h1 className="tc">Loading...</h1> :
    (
        <div className='tc'>
            <h1 className='f1'>RoboFriends</h1>
            <SearchBox searchChange={onSearchChange} />
            <Scroll>
                <ErrorBoundary>
                    <CardList robots={filteredRobots} />
                </ErrorBoundary>
            </Scroll>
        </div>
    );

Если вас интересуют наши странные имена классов, в JSX мы используем библиотеку CSS под названием тахионы. Это действительно отличная библиотека.

Теперь наш полный код выглядит так:

Сохраните файл и убедитесь, что ничего не сломано.

Поздравляем !!! Наш код теперь работает, и я осмелюсь сказать, более читаемый и легкий для понимания.

Есть еще один компонент на основе классов: ErrorBoundary.js, но мы оставим его как компонент на основе классов.

Причина проста: на момент написания этого руководства у метода жизненного цикла componentDidCatch не было эквивалентной ловушки, и нам нужно использовать ее в нашем компоненте ErrorBoundary.

Вышеупомянутый пункт является свидетельством того, что Hooks все еще находятся в раннем возрасте. На момент написания этого руководства React Hooks все еще находились в альфа-версии. По словам основной команды React, они не намерены убирать классы из React, поэтому будьте уверены, ваши старые проекты на основе классов в безопасности.

Я надеюсь, что вам нравится React Hooks так же, как и мне. Если у вас есть какие-либо вопросы или проблемы, напишите мне в комментариях. Удачного кодирования!

Нокаут

Изначально опубликовано в Блоге KayO’s.