С введением хуков React (в React 16.8-alpha) возникла проблема - вычисления без необходимости переоцениваются из-за того, что объявления выполняются на этапе рендеринга.
Проще говоря, если теперь мы используем компоненты класса и сохраняем результаты вычислений в экземпляре класса, чтобы сэкономить драгоценную вычислительную мощность:
В ближайшем будущем у нас не будет выбора, кроме как делать все в рамках самого метода рендеринга, продиктованного хуками:
Чтобы решить эту проблему, команда React изобрела несколько методов: useCallback() и useMemo(). Каждый из них используется по разным причинам, но они довольно похожи, и, по сути, они используются как охранные функции, которые повторно активируются только при изменении определенных параметров. Я рекомендую вам просмотреть официальную документацию по React, чтобы лучше понять их. Если бы мы реализовали это в приведенном выше примере, это должно было бы выглядеть так:
Подождите ... Значит ли это, что я должен заключить все свои объявления в эти хуки, чтобы получить производительность, которая находится на одном уровне с компонентами класса ?!
Правильно, Владимир. Даже команда React предложила это, и я цитирую их документы:
«В будущем достаточно продвинутый компилятор сможет создавать этот массив автоматически» - React
Хорошо, что я люблю React и думаю о будущем. Вот почему я изобрел этот плагин Babel под названием babel-plugin-react-persist, и он решает именно эту проблему! Все, что вам нужно сделать, это отредактировать ваш .babelrc файл, и код будет автоматически преобразован! Мало того, плагин также заботится об оптимизации встроенных анонимных функций в JSX-атрибутах. Таким образом, каждая фаза рендеринга будет иметь аналогичный экземпляр предполагаемого обратного вызова. Итак, учитывая следующий код:
Плагин сгенерирует:
Так чего же ты ждешь? Посетите официальный репозиторий GitHub и получите копию плагина! Есть какие-нибудь предложения или пожелания? Не стесняйтесь открывать заявку на странице вопросов репо или оставлять комментарии ниже!
