Является ли это разумной реализацией shouldComponentUpdate?

Question

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

Однако, что не так с чем-то вроде этого:

shouldComponentUpdate(nextProps, nextState) {
  const propsChanged = JSON.stringify(this.props) !== JSON.stringify(nextProps)
  const stateChanged = JSON.stringify(this.state) !== JSON.stringify(nextState)
  return propsChanged || stateChanged
}

Это уместно?Не получится ли это неожиданным образом?

Я бы подумал, что JSON.stringify и прямое сравнение строк также будут очень быстрыми операциями.

В целом такой подход мне кажется правильным, но мне интересноесли я пропущу какие-либо очевидные ловушки.

Answer 1

Не получится ли это неожиданным образом?

Возможно, и это почти наверняка будет медленнее, чем глубокий обход объекта для определения равенства (поскольку JSON.stringify должен выполнитьглубокий обход объекта в любом случае ).

Один из способов, которым он может потерпеть неудачу, состоит в том, что JSON.stringify может возвращать разные строки для эквивалентных объектов (и это определенное поведение):

const o1 = {a: 1, b: 2};
const o2 = {b: 2, a: 1};
const str1 = JSON.stringify(o1);
const str2 = JSON.stringify(o2);
console.log(str1);
console.log(str2);
console.log(str1 === str2);

... хотя я допускаю, что это маловероятно (по крайней мере) в случае реквизита и состояния в вашем компоненте React.(Это происходит, когда свойства нецелого индекса на объектах создаются в другом порядке. Вероятно, этого не произойдет с вашими реквизитами верхнего уровня или свойствами состояния, а как быть с подчиненными объектами? this.setState({foo}); где foo - это объект, созданный по-разному в разное время ...)

Answer 2

использовать loadash _.isEual метод lodash

Answer 3

Нет, это не разумная реализация.JSON.stringify - потенциально медленная операция.

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