React Hooks: компонент Stateless против класса Class в эпоху хуков - что лучше и рекомендуется?

Question

После прочтения большого количества документации в Интернете и в SO ( здесь ) большинство людей предложили использовать функции без состояния (функциональные компоненты), когда это возможно.

Даже большинство методов жизненного цикла компонентов класса были заменены хуками, такими как useState и useEffect.

Я создал несколько проектов, использующих хуки и их эквиваленты класса, я вижу разницу в количестве строк кода и функциональности.

Итак, какой из них лучше другого? Функциональный компонент компонента Class?

Answer 1

Если вы имеете в виду лучше - с помощью эффективности, это очень трудно измерить. Вот замечательный пост Дана Абрамова о бенчмарке , где в конце он говорит:

Крюки всегда быстрее, чем HOC? Нет! Есть случаи, когда один подход выигрывает у другого, и это зависит от многих вещей.

Вот мой личный опыт:

Наша реакция + Redux SPA был запущен до эры хуков, и у нас более 100 миллионов пользователей и от 300 000 до 400 000 строк кода (не хвастаясь здесь, просто чтобы понять, что это действительно большое приложение).

Когда хуки были официально выпущены для Production, и мы наконец обновили нашу версию React, модалы, входы, кнопки, загрузчики изображений и многие другие простые компоненты выглядели потрясающе при переходе с компонентов класса на функциональные с хуками.

Код стало намного чище и проще в обслуживании. Некоторые компоненты / HOCs перешли от 50-100 строк до всего лишь 20 или 30 с использованием хуков. Это удивительно!

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

В этих случаях удобочитаемость при использовании компонентов класса намного выше.

Что касается производительности, опять же, я не думаю, что есть большая разница, и нам почти никогда не приходилось беспокоиться об этом, так что пока код хорошо написан.

Я создал небольшой проект ( Markdown Tables Generator ) как песочницу и практиковаться, используя только функциональные компоненты и крючки. Мне действительно нравятся крючки useSelector() и useDispatch(), но когда однажды меня спросили на собеседовании, буду ли я go универсальными крючками на их проекте среднего / большого размера, я сказал, что не буду.

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

Answer 2

Как только компонент реализует componentDidCaught, он должен быть компонентом, основанным на классах.

Логика регулирования / деблокирования / интервала c также выглядит намного лучше (более четким, более читаемым) в классе с доступом через ссылка, чем в функциональном компоненте с его замыканиями и useEffect.

В противном случае функциональность выглядит лучше (код короче - особенно когда мы используем Context API или перехватчики вместо HO C, как это происходит для Redux, лучше DRY Благодаря пользовательским хукам, лучший контроль над побочными эффектами благодаря useEffect - когда запускать, как отменить Просто "функционал".