Оптимизация производительности в React

[Ronnie_Gardocki]

От

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

мне стало физически плохо, почему нельзя сделать просто

shouldComponentUpdate(nextProps, nextState) {
  return (this.props.color !== nextProps.color) || (this.state.count !== nextState.count);
}

?

P.S. я понимаю что это перевод, вопрос скорее риторический.

[vtikunov]

Думаю, что это пример, чтобы был понятен масштаб бедствия — если проверять надо, например, 10 свойств. Я надеюсь, вы не собираетесь писать такую проверку в одну строку?

[Ronnie_Gardocki]

Можно каждое условие на следующую строчку переносить. В моем мировозрении множественные if нужны, когда внутри веток делается что-то кроме возвращения boolean.

[AlexKeller]

Если там 10 свойств, то можно сравнивать целиком:

shouldComponentUpdate(nextProps, nextState) {
  return this.props !== nextProps || this.state !== nextState;
}

[dchusovitin]

В данном случае shouldComponentUpdate будет всегда возвращать true, т.к. сравниваются ссылки на объект, а не их содержимое. Лучше тогда использовать PureComponent, react-addons-shallow-compare, shallow-compare-without-functions (сравнение объектов без учета функций), либо другие решения.

[AlexKeller]

Ну да, вы правы. Я имел в виду просто сравнение их целиком. А уж как они будут реализованы, это другой вопрос. Immutable ли, или обычные объекты и собственный метод глубокого сравнения внутрь с предварительным клонированием

[exewebru]

Код должен быть читаемым, сокращение кода это работа оптимизаторов.