Question

在render函数中定义函数或在类作用域中定义函数之间是否存在性能差异？

render功能范围：

render() {
  const renderItem = (item) => (<li>{item.name}</li>);

  return (<ul>
    {this.props.itemList.map((item) => renderItem(item))}
  </ul>);
}

class范围：

export default class MyComponent extends React.Component {
   const renderItem = (item) => (<li>{item.name}</li>);

   render() {
     return (<ul>
       {this.props.itemList.map((item) => this.renderItem(item))}
     </ul>);
   }

}

Answer 1

是的，某种程度上表现不同。

但是这种差异是那么微小，你甚至可以注意到或告诉它有什么区别。

问题是，当您在renderItem方法中定义render时，每次调用render方法时，都会重新创建renderItem函数。另一方面，renderItem在生命中只定义一次。

因此你可以认为“外部”方法会更快。但问题是，在“内部”方法中，renderItem每次调用只会创建一次。因此，如果您要渲染100万个项目，整个过程的“瓶颈”将是map本身，而不是renderItem方法的创建，那么？

但是为了测试，我构建了这个样本，以测试两种方法，insideFunction和outsideFunction。您可以在浏览器中复制并运行。

要进行测试，您可以运行bench(10000)以查看两个方法对具有10000个元素的数组所花费的时间（在我的计算机中，此大小的平均时间约为0.05~0.07秒。

您还可以运行多个bench测试并查看输出平均值，其中包含：nBenchs(10, 10000)，运行10次bench(10000)测试。

结论：在我的计算机上，使用包含100万个位置的数组运行测试，对于这两种方法，我的平均值大约为7秒。在大多数情况下，运行这几次，“外部”方法比“内部”快半秒。但请记住这一点，如果你有一个代码需要7秒才能将输出返回给用户，你应该开始考虑其他方法来减少这个值（比如先显示部分结果然后更快）。如果你正在构建一个处理大量数据的应用程序，并且拥有大量的进程算法（这在web / react应用程序中并不常见），那么每个动作可以节省7％的时间（七分之一，在此案例）很珍贵。

(function() {
  function renderItem(text) {
    let item = document.createElement('li');
    item.innerHTML = text;

    return item;
  }
  function outsideFunction(array) {
    return array.map(renderItem);
  }

  // exponse outsideFunction
  window.outsideFunction = outsideFunction;
})();

(function() {
  function insideFunction(array) {
    function renderItem(text) {
      let item = document.createElement('li');
      item.innerHTML = text;

      return item;
    }

    return array.map(renderItem);
  }

  // exponse insideFunction
  window.insideFunction = insideFunction;
})();

// just build an array with n elements
function buildArray(n) {
  let testArray = [];
  for(let i=0; i<n; i++) {
    testArray.push(`Text with index ${i}`);
  }

  return testArray;
}

// run nb test benchs with an array with n elements
function nBenchs(nb, n) {
  let Ocount = 0, Icount = 0;
  let result;

  for(let i=0; i<nb; i++) {
    result = bench(n);

    Ocount += result.Oend;
    Icount += result.Iend;
  }

  // output the average
  console.log(`outsideFunction average: ${Ocount/(nb*1000)} seconds`);
  console.log(`insideFunction average: ${Icount/(nb*1000)} seconds`);
}

// run a test bench with an array with n elements
function bench(n) {
  n = n || 100;

  let testArray = buildArray(n);
  let start, Oend, Iend;

  start = new Date();
  outsideFunction(testArray);
  Oend = ((new Date())-start);

  console.log(`outsideFunction: ${Oend/1000} secods`);

  start = new Date();
  insideFunction(testArray);
  Iend = ((new Date())-start);

  console.log(`insideFunction: ${Iend/1000} secods`);

  return { Oend, Iend };
}

Answer 2

在类范围内定义它会稍微快一点，因为该函数只会创建一次。如果在render-method中定义它，则每次调用render-method时都会创建该函数。

那就是说，它不太可能产生任何明显的影响。

在render函数中表现函数表达式

2 个答案: