Как сказал KuchBhi, вам нужно будет использовать метод жизненного цикла shouldComponentUpdate.
shouldComponentUpdate вызывается каждый раз, когда новые реквизиты или состояние передаются компоненту и по умолчанию возвращает true (можеттолько верните true для обновленных реквизитов, не уверен на 100%).Метод принимает два параметра: nextProps и nextState.Затем вы можете сравнить их с this.props и this.state, чтобы решить, следует ли вам обновить.
Стандартная / типичная реализация этого метода - что-то вроде этого (псевдо):
shouldComponentUpdate(nextProps, nextState) {
//Really it's a deeper equality check, not just the props/state object
return this.props !== nextProps || this.state !== nextState;
}
Что вы можете сделать в качестве альтернативы, это построить немного больше в случаях, когда возвращается false.Вот пример из одного из моих проектов, где я хочу рендерить только тогда, когда два конкретных реквизита различны:
shouldComponentUpdate(nextProps) {
const minUpdated = this.props.min !== nextProps.min;
const maxUpdated = this.props.max !== nextProps.max;
return minUpdated || maxUpdated;
}
Компонент также имеет реквизиты, такие как масштаб, выравнивание, ширина и т. Д., Но я нене хочу обновлять, когда я получаю их как новые реквизиты, поэтому я не проверяю, не равны ли они.
По сути, вы могли бы просто вернуть false в этом методе и никогда не обновлять после начальной загрузки, но я бы избегал этого, поскольку это отрицает цель реакции.
edit: Как сказали varoons, этоВероятно, это отличный сценарий для вас, чтобы использовать новый контекстный API, и я настоятельно рекомендую изучить его, но также полезно знать о методах жизненного цикла компонентов.