Хотел бы я знать это, прежде чем погрузиться в React

В OpsGenie мы глубоко погрузились в React для нашего проекта Badges. Я узнал много нового и сделал много ошибок. Некоторые из моих знаний субъективны, но я думал, что они могут помочь другим людям изучить React и избежать повторения тех же ошибок. Короче говоря, это то, что мне действительно помогло.

1. По умолчанию setState запускает повторную визуализацию.

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

У каждого компонента есть метод shouldComponentUpdate, который вызывается каждый раз, когда вы изменяете состояние или передаете новые свойства от родительского элемента. составная часть. React решает, выполнять повторный рендеринг или нет, в соответствии с возвращаемым значением shouldComponentUpdate.

По умолчанию shouldComponentUpdate возвращает true, но вы можете переопределить его, чтобы вернуть false для случаев, когда вы не хотите повторного рендеринга. Вот пример:

Важные заметки:

1. Неправильная установка shouldComponentUpdate или забвение того, что вы установили, может вызвать серьезные проблемы, поскольку ваш компонент может не обновляться должным образом.
2. Выполнение вычислений в shouldComponentUpdate может быть дорогостоящим с точки зрения производительности и усилий, поэтому вы должны убедиться, что оно того стоит. Я настоятельно рекомендую вам использовать React's Performance Tools, чтобы проверить количество потраченных впустую циклов до и после использования shouldComponentUpdate. У него очень простое использование:

2. setState обновляет локальное состояние асинхронно.

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

Распространенной ошибкой является чтение this.state сразу после звонка setState. В общем, использование this.state внутри метода setState ненадежно.

Если вам нужно обновить состояние на основе предыдущего состояния, рекомендуется использовать функцию updater, которая является первым аргументом setState(updater, [callback]).

Пример передачи функции updater в setState:

Бонус: каков второй аргумент, callback?

Это дополнительная функция обратного вызова, выполняемая после завершения setState и повторной визуализации компонента. Однако для такой логики рекомендуется componentDidUpdate вместо callback в официальной документации.

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

3. Жизненный цикл компонентов важен!

Первый шаг к счастливой жизни с компонентами React - это понимание жизненного цикла компонентов. У каждого компонента React есть методы, которые можно использовать для запуска кода в определенные моменты жизненного цикла компонента. Чтобы использовать их правильно, вы должны понимать порядок вызова методов жизненного цикла. Мы можем просто разделить жизненный цикл на три части:

Монтаж: экземпляр компонента создается и вставляется в DOM.

Обновление: компонент повторно обрабатывается, это может быть вызвано изменениями свойств или состояния.

Размонтирование: компонент удаляется из DOM.

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

4. Используйте componentWillReceiveProps.

Если вы хотите обновить состояние в ответ на изменения реквизита, это тот метод, который вам нужен. Сравните this.props с nextProps и, если есть значительное изменение, действуйте в соответствии с ним.

Здесь два важных замечания:

1. React может вызвать componentWillReceiveProps, даже если свойства не изменились, поэтому сравнение this.props и nextProps важно.
2. componentWillReceiveProps вызывается до того, как смонтированный компонент получит новые реквизиты, это означает, что React не вызывает componentWillReceiveProps с начальными реквизитами во время монтирования.

5. Используйте инструменты разработчика React.

Инструменты разработчика React позволяют вам проверять иерархию компонентов React, свойства и состояние компонентов. Это очень полезно во многих случаях, потому что React - это компоненты. Существует как расширение браузера (для Chrome и Firefox), так и отдельное приложение.

6. Используйте приложение Create React.

Facebook Create React App позволяет создавать приложения React без конфигурации сборки. Он очень прост в использовании и имеет отличный файл readme для Github. Вам нужно всего лишь иметь Node ›= 6, и он работает в macOS, Windows и Linux.

И еще одно: не забывайте следить за блогом OpsGenie Engineering, чтобы изучать такие интересные темы, как Serverless, AWS, React!

Заинтересованы в других публикациях?