Самый лучший способ повысить производительность приложения — уменьшить количество вызовов метода рендеринга.
Я рассматриваю несколько сценариев и решений, как показано ниже.
Сценарий 1. Пользовательские компоненты, в которых они в основном зависят от свойств
SelectComponent — это настраиваемый компонент, в котором он отображается на основе массива получаемых элементов. Компонент Home использует SelectComponent для создания раскрывающегося списка для стран, штатов и типов пользователей.
класс SelectComponent расширяет React.Component {
render() { ‹div› визуализирует выпадающие элементы, используя {this.props.items} ‹/div›}
}
класс Home расширяет React.Component{
состояние = {страны: […], состояния: […], selectedCountry: 1, userTypes: […] }
CountryChange(событие){
var filterStates = [… фильтровать состояния в зависимости от страны]
this.setState({ selectedCountry: event.target.value, States: filterStates})
}
оказывать() {
возвращение (
‹див›
‹SelectComponent items={this.state.countries} onChange={this.countryChange.bind(this)}/›
‹SelectComponent items={this.state.states} /›
‹SelectComponent items={this.state.userTypes} /›
‹/дел
);
}
}
Здесь, когда страна меняется, мы вызываем метод setState, где он также запускает метод рендеринга SelectComponent для пользовательских типов.
Мы можем переопределить это, внедрив shouldComponentUpdate.
После улучшения:
класс SelectComponent расширяет React.Component {
shouldComponentUpdate(newProps, newState){
if(this.props.items != newProps.items){
возвратить true;
}
вернуть ложь;
}
оказывать() {
‹div› отображает выпадающие элементы, используя {this.props.items} ‹/div›
}
}
Сценарий 2. Обновление определенного компонента вместо вызова всего рендеринга.
Домашний компонент имеет много строк в методе рендеринга. Предположим, что заголовок на экране должен обновляться на основе какого-либо действия, такого как buttonClick или любого другого действия. Обычно мы вызываем метод setState. Это вызывает весь метод рендеринга, который влияет на производительность.
класс Home расширяет React.Component{
состояние = {
title: «Добро пожаловать в демоверсию»
}
updateTitle (событие) {
this.setState({ title: 'Демонстрация запущена'})
}
оказывать() {
возвращение (
‹див›
‹div› {this.state.title}‹/div›
‹input type='button' value='Update' onClick={this.updateTitle.bind(this)}/›
‹Компонент2 /›
‹Компонент3 /›
‹Компонент4 /›
Какой-то другой код пользовательского интерфейса
….
…
‹/дел
);
}
}
Мы можем улучшить приведенную выше логику, создав отдельный компонент и используя ссылки для обновления только этого компонента.
После улучшения:
Заголовок класса расширяет компонент {
конструктор (реквизит) {
супер (реквизит);
this.state = {название: this.props.title}
}
setTitle (название) {
this.setState({название: название})
}
оказывать() {
возвращение (
‹див›
{это.государство.название}
‹/дел›
);
}
}
класс Home расширяет React.Component {
…
…
…
updateTitle (событие) {
//this.setState({ title: 'Демонстрация запущена'});
this.refs.header.setTitle('Демонстрация запущена');
}
оказывать() {
возвращение (
‹див›
‹Заголовок ref="header" title={this.state.title}›‹/ Заголовок ›
…
…
}
У меня есть несколько других подходов для добавления (кратко добавлено ниже). Я также добавлю их с некоторым псевдокодом, основываясь на отзывах об этом.
1.СоздайтеHigherOrderComponents для перемещения общей логики
2.Уменьшите вычисления в методе рендеринга.
3. не передавайте методы в качестве реквизита дочерним компонентам. Используйте ChildContext.. Это похоже на доступ к дочерним методам в родительском с помощью refs и доступ к родительским методам в дочернем с помощью childContext.
