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

但是，如果您的应用中的其他代码慢得多，那么即使21ms也不一定是问题。

for ... in内的for循环应该被认为昂贵吗？

1 个答案: