React: 6 подсказок для начинающих

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

1 setState вызывает перерисовку

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

У каждого компонента есть метод shouldComponentUpdate и он вызывается каждый раз, когда меняется состояние или передаются новые параметры (props) из родительского компонента. Отрисовывать заново компонент или нет — за это отвечает этот метод. 

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

shouldComponentUpdate(nextProps, nextState) {
    const vitalPropsChange = this.props.bar !== nextProps.bar;
    const vitalStateChange = this.state.foo !== nextState.foo;    
    return vitalPropsChange || vitalStateChange;
}

1. Если неправильно определять, что должен возвращать этот метод, то компонент будет отрисовываться не так, как ожидается.
2. Запуск вычислений в методе shouldComponentUpdate может привести к проблемам производительности.

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

Изменение состояния не происходит моментально. Самая распространённая ошибка: чтение состояния сразу после вызова setState.

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

Пример использования updater:

this.setState((prevState) => {  
   return {value: prevState.value + 1};
});

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

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

Очень важно понять и простить жизненный цикл компонента. 

Его можно условно разделить на 3 части:

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

Обновление: перерисовка компонента из-за изменения состояния или параметров.

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

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

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

Пара замечаний:

1. Иногда React может вызвать  componentWillReceiveProps, даже если параметры не изменились, поэтому в целях оптимизации производительности стоит сравнивать текущие параметры и следующие.
2. React не вызывает componentWillReceiveProps во время монтирования компонента.

5 Используйте React Developer Tools

React Developer Tools позволяет инспектировать компоненты, их параметры и состояние. Это дополнение очень похоже на стандартный инспектор DOM, встроенный в Chrome Dev Tools. 

React Developer Tools распространяется как расширения для браузера (для  Chrome и Firefox), а также как самостоятельное приложение.

6 Используйте Create React App

Create React App от Facebook позволяет создавать приложения без настройки сборки. Этот инструмент прост в использовании и имеет хорошую инструкцию на Github. Для использования необходимо иметь Node версии 6 и выше.