8 предложений, которые улучшат ваше приложение React

8 предложений, которые улучшат ваше приложение React

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

1. Используйте приложение create-react-app.

Не портите себе хорошее настроение, тратя ненужное время на конфигурирование!
Если у вас нет особых требований к вашему приложению, нет смысла тратить много усилий на настройку вашей среды снова и снова, каждый раз, когда вы нужно начать новый проект.
Create-react-app - это официально поддерживаемый шаблон, который загружает ваш новый проект за вас. Вы будете готовы написать код за считанные секунды.

Вы определенно найдете разработчиков, которые со мной не согласны, но я все еще не согласен!
95% времени я использую create-react-app.

Посетите официальную страницу Facebook и узнайте, как получить выгоду от create-react-app.

2. Будьте в курсе с экосистемой React.

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

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

3. Используйте PropTypes

По мере роста вашей кодовой базы это может сэкономить вам много времени на поиск ошибок с помощью проверки типов.

Для крупномасштабных решений я бы рекомендовал использовать расширения JavaScript, такие как TypeScript, хотя использование встроенной проверки типов в React имеет большое значение.

PropTypes действительно прост в использовании.
Давайте рассмотрим пример.

В этом примере мы хотим убедиться, что свойства blogTitle и blogID относятся к типам string и number соответственно.
Кроме того, мы хотим убедиться, что blogTitle всегда предоставляется простым объединением isRequired

Любые нарушения вышеупомянутого приведет к предупреждению в консоли.

4. Используйте функциональные компоненты.

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

В этом примере мы видим, как можно избежать ненужной сложности и строк кода, заменив компонент класса функциональным компонентом.

Таким образом, вы используете все менее и более читаемый код, что позволяет избежать this привязки.
По возможности вы всегда должны стремиться использовать функциональные компоненты.
Таким образом, вы также заставляя себя пересмотреть, должен ли компонент быть с отслеживанием состояния, и избегать случайного сохранения состояния компонента, которое вам не следует или не нужно.

5. Остерегайтесь setState

При использовании setState() для обновления состояния помните, что вызов setState() может быть асинхронным.
Поскольку React будет пытаться объединить несколько вызовов setState() в одно обновление, вам не следует полагаться на значение состояния, которое обновляется немедленно.

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

Вот 3 простых способа обойти это.

1. Передайте последующие операторы, заключенные в функцию обратного вызова, в setState()

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

2. Передайте функцию setState() вместо литерала объекта.

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

3. Создайте асинхронную функцию-оболочку, которая возвращает обещание

Лично я большой поклонник этого небольшого трюка.
Просто оберните setState в функцию, которая возвращает обещание, которое разрешается, когда состояние было эффективно обновлено.

Вот пример функции-оболочки в двух версиях: ES7, использующий ключевое слово async, и ES6, возвращающий новое обещание.

Вы также можете выбрать более обобщенную функцию-оболочку async, которая будет устанавливать любое состояние и возвращать обещание.

6. Избегайте функций стрелок и привязок при рендеринге.

Очень часто возникают ситуации, когда может показаться простым использование стрелочных функций или привязок внутри метода render().
Ниже приведены примеры такого использования.

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

Но представьте, что вы используете map() для рендеринга большого списка компонентов и делаете это несколько раз для каждого, или что вы - по мере роста вашего приложения, в конечном итоге делаете это очень часто и повсюду. Это создаст дополнительную нагрузку на сборщик мусора, поэтому передача анонимной функции blogPost вызовет дополнительный повторный рендеринг, что приведет к потенциально заметному снижению производительности рендеринга.

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

Этого можно добиться несколькими способами, в зависимости от того, как вы структурировали свой код.
Примером может быть

7. Вычисляемые имена свойств

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

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

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

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

8. Использование HOC.

HOC, или компонент более высокого порядка, - одна из наиболее продвинутых техник в React.
Однако, когда вы немного поработаете с HOC, становится действительно ясно, насколько мощным является этот подход.

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

Точно так же HOC - это функция, которая принимает компонент и возвращает новый компонент.

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

Допустим, у нас есть список объектов blogPosts, у нас есть функция, которая будет фильтровать эти blogPosts на основе автора, и у нас есть разные компоненты, в которых мы хотим, чтобы это отображается отфильтрованный список.

Вместо того, чтобы копировать эту функцию фильтрации, мы можем определить HOC, который принимает презентационный компонент, blogPosts и authorName, и применяет к нему логику фильтрации.

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

Обратите внимание на то, что у возвращаемого нами класса нет имени. Это анонимный класс.
Также обратите внимание, что мы передаем любые дополнительные свойства обернутому компоненту, поскольку нас не волнует, какие другие свойства он принимает.

Теперь мы можем использовать наш HOC вот так

Вот и все!
Если у вас есть какие-либо вопросы или отзывы, пожалуйста, оставьте комментарий ниже. Если вам понравилась эта статья, дайте кнопке хлопать 👏 пару нажатий!