Все мы знаем, что в React есть два типа компонентов.
- компоненты классов
- функциональные компоненты
До версии React 16.8 функциональные компоненты были статичными.
Однако с появлением хуков в React 16.8 функциональные компоненты стали способны иметь состояние и методы жизненного цикла (здесь я имею в виду методы жизненного цикла, использующие хуки).
Возможность разделять логику с состоянием, не зависящую от логики рендеринга пользовательского интерфейса, сделала функциональные компоненты популярными среди разработчиков React. С помощью функциональных компонентов мы можем делать практически все, что возможно с компонентами классов.
Тогда почему в ReactJS до сих пор есть компоненты классов?
Несмотря на наличие множества полезных возможностей в компонентах функций, есть некоторые случаи, в которых нам необходимо использовать компонент класса вместо компонента функции:
1. Граница ошибки
При возникновении ошибки на экране обычно отображается дерево компонентов, которое разрушилось, что может произвести плохое впечатление на конечного пользователя.
Границы ошибок помогут нам справиться с этой ситуацией.
Границы ошибок позволяют отображать резервный пользовательский интерфейс при возникновении ошибки внутри компонента.
Мы можем использовать границы ошибок для отслеживания ошибок на стороне клиента и предоставления полезной информации для отладки.
Невозможно создать границу ошибки с помощью компонента функции.
Границы ошибок могут быть реализованы только с помощью компонентов класса.
2. Чистый компонент
Много раз нам нужно избежать ненужного повторного рендеринга компонентов в зависимости от определенных критериев.
В таких случаях мы можем использовать чистые компоненты, расширив React.PureComponent, поскольку у них есть статический метод “shouldComponentUpdate”, который решает, перерисовывать или нет компонент, основываясь на его реквизитах и состоянии.
Многие разработчики react js используют хук “useMemo”, чтобы избежать ненужного повторного рендеринга, как в этом случае:
const App=()=>{ return useMemo(()=>{ return <>{/*Code*/}</> },[dependancies]) }
Однако все, что было до хука “useMemo”, все равно будет выполнено, когда компонент обновит свое состояние. Поэтому “useMemo” не всегда может быть лучшим вариантом для избежания ненужного повторного рендеринга.
Поскольку мы не можем создавать чистые компоненты с помощью компонентов функций, нам придется использовать компоненты классов.
3. Методы жизненного цикла
Я знаю, что этого не должно быть, потому что большинство методов жизненного цикла, таких как componentDidMount, componentDidUpdate или componentWillUnmount, могут быть заменены на useEffect.
Важно отметить, что хук useEffect требует некоторой дополнительной осторожности, когда речь идет о зависимостях и предотвращении бесконечных циклов.
Нужно быть очень осторожным с зависимостями и следить за тем, чтобы зависимость не обновлялась внутри хука (это может привести к бесконечному циклу).
В компоненте класса методы жизненного цикла выполняются автоматически при наступлении определенных событий, например, когда компонент монтируется, обновляется или размонтируется.