10 лучших практик для каждого разработчика React

Как получить максимальную отдачу от библиотеки React и какие шаги нужно предпринять.

React — одна из самых популярных интерфейсных библиотек для JavaScript. Он предлагает множество замечательных функций, но, как мы знаем, у всего есть свои плюсы и минусы. Если вы не знаете, как правильно использовать какую-либо технологию, вместо того, чтобы упрощать вещи, это может усложнить все.

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

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

1. Отдельная логика состояния приложения и представление в разных компонентах.

1. Сведите к минимуму использование состояния , объявляя его только при необходимости.

1. Попробуйте использовать хуки. Перейдите по указанной ссылке, чтобы узнать, как ее можно адаптировать https://reactjs.org/docs/hooks-intro.html

1. Вы можете использовать React.useMemo или React.useCallback для оптимизации производительности. Но учтите, React.memo следует применять только к чистым компонентам. Вы не должны использовать React.useMemo и React.useCallback без измерения , потому что эти оптимизации имеют свою цену, и вы должны убедиться, каковы затраты, а также выгоды, чтобы вы могли решить, стоит ли это будет на самом деле выгодно или нет.

1. Используйте ключевые реквизиты Ключи помогают React определить, какие элементы были изменены, добавлены или удалены. Дополнительные сведения см. здесь https://reactjs.org/docs/lists-and-keys.html

1. Избегайте использования индексов или любых повторяющихся значений в качестве реквизита ключа.

1. Bпрежде чем добавлять дополнительные библиотеки, узнайте, какие встроенные функции предлагает react. Есть возможность создать целое приложение без включения какой-либо другой библиотеки.

1. Напишите тесты, потому что тестирование обеспечивает целостность кода. Подробнее см. по указанной ссылке https://reactjs.org/docs/testing.html

1. Чтобы избежать утечек памяти в приложении,

• Если возможно Очистите все подписки(запросы API, прослушиватели событий, таймеры) перед выходом из компонента.

• Перед обновлением состояния компонента проверьте, находится ли компонент в модели DOM , а затем обновите состояние.

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

Я надеюсь, что это было полезно. Комментируйте, делитесь и дайте мне знать, если вам это нравится, ваше небольшое усилие побуждает меня писать больше.

Также опубликовано [здесь] (https://javascript.plainenglish.io/reactjs-best-practices-ec6bc148e6f5)