В последнем посте я говорил о различиях между компонентом класса и функциональным компонентом. Этот пост о том, как компонент может быть перемещен из класса в функциональный компонент.
Рассмотрим компонент класса, который получает набор элементов списка дел с сервера и позволяет пользователю создать новый элемент. По сути, компонент To-Do-List. При использовании компонента класса это будет написано следующим образом:
В приведенном выше примере компонент монтируется и получает список задач с сервера при монтировании (функция жизненного цикла componentDidMount). Затем список элементов устанавливается в состояние, а затем отображается. При каждом добавлении в список элемент отправляется на сервер и добавляется в состояние (функция postTask).
Теперь мы преобразуем вышеуказанный компонент в функциональный компонент. Во-первых, переместите состояние. Для этой цели React предоставляет хук useState. Это возвращает массив со значением и его функцией установки. Таким образом, состояние в конструкторе становится
Затем переместите выборку в функцию componentDidMount. Предоставленный хук useEffect служит этой цели. Хук принимает 2 значения: функция, которая будет выполняться при монтировании компонента, и значения, которые нужно искать. Когда предоставленные значения изменяются, функция выполняется. Это становится,
Функция рендеринга заменена простым возвратом. Функция возвращает компонент JSX для отображения. В итоге финальный функциональный компонент выглядит так:
Как вы можете заметить, функциональный компонент намного читабельнее и проще для понимания по сравнению с классовым компонентом. Функциональный компонент гораздо более удобен для разработчиков, поэтому в наши дни он гораздо популярнее.
