Является ли for ... in loop изнутри следует, что ComponentUpdate () считается дорогим?

Question

Я пытаюсь реализовать shouldComponentUpdate() для повышения производительности моего приложения.

Обычно компонент перерисовывается каждый раз, когда пользователь изменяет значение поля ввода.Значения полей хранятся так:

{
  inputs: {
   fieldName1: {
     value: '',
     isInvalid: false
   }
   fieldName2: {
     value: '',
     isInvalid: false
   }
   fieldName3: {
     value: '',
     isInvalid: false
   }
  }
}

Я не хочу, чтобы компонент обновлялся при изменении значений полей.Поэтому я придумал следующее:

shouldComponentUpdate(nextProps) {
  //The inputs object inside the state is passed down in form of a property called state

  const { state } = this.props;

  for (let key in state) {
    if (state[key].value !== nextProps.state[key].value) return false;
  }

  return true;

}

Это работает просто отлично, но я боюсь, что использование цикла for...in внутри shouldComponentUpdate() может вызвать проблемы с производительностью.Это правда?Если так, что я должен сделать в качестве альтернативы?

Заранее спасибо

(Если кому-то нужно внимательно изучить это, пожалуйста, посетите мой репо: https://github.com/WebDeg-Brian/static-eagle-nest)

Answer 1

Работает просто отлично, но я боюсь, что использование for...in цикла внутри shouldComponentUpdate() может вызвать проблемы с производительностью.Это правда?

Это зависит от количества итераций цикла.Чем больше итераций, тем больше времени затрачивается в цикле.

100 итераций потребуют меньше времени, чем 10000 итераций.

Нет смысла рассуждать о потенциальных проблемах производительности (ожидайте, чтоупражнение).Профилируйте / измеряйте свое приложение и сосредоточьтесь на улучшении деталей, которые на самом деле медленны.

---

Для забавы, вот некоторые измерения для итерации по объектам различных размеров (выполнялись в инструментах разработчика Chrome):

var obj = {};
for (var i = 0; i < 100; i++) obj[i] = 'foo' + i;
console.time();
for (var p in obj) 'foo' === obj[p];
console.timeEnd();
// default: 0.01904296875ms

var obj = {};
for (var i = 0; i < 1000; i++) obj[i] = 'foo' + i;
console.time();
for (var p in obj) 'foo' === obj[p];
console.timeEnd();
//default: 0.465087890625ms

var obj = {};
for (var i = 0; i < 10000; i++) obj[i] = 'foo' + i;
console.time();
for (var p in obj) 'foo' === obj[p];
console.timeEnd();
//default: 2.2109375ms

var obj = {};
for (var i = 0; i < 100000; i++) obj[i] = 'foo' + i;
console.time();
for (var p in obj) 'foo' === obj[p];
console.timeEnd();
// default: 21.291015625ms

Но даже 21 мс не должны быть проблемой, если другой код в вашем приложении намного медленнее.