javascript - 在 React 组件渲染中初始化一个数组(性能方面)

Question

众所周知，我们不应该在渲染中使用匿名函数，因为它们将在每次渲染时重新创建。但是像这样的对象数组呢:

// name props is passed in so it seems like there is a point in initializing the array inside the component
const Component = ({ name }) => {
  // let's imagine there is a lot of large objects
  const bigArray = [{id: 1, name}, {id: 2, name}];

  return <AnotherComponent data={bigArray} />;
}

我想数组(和里面的对象)是通过引用存储的，所以当组件被重新渲染时，解释器会看到这是相同的引用并且不会重新创建数组。我的假设是否正确？

Answer 1

不，这不是同一个引用。您正在创建新数组，其中包含每个渲染中的新对象。如果它是完全静态的，你可以从你的函数中提取它以保持相同的 ref:

const name = 'some-name';
const bigArray = [{id: 1, name}, {id: 2, name}];

const Component = () => (
   <AnotherComponent data={bigArray} />;
);

但在你的例子中，这个数组是从 prop 生成的。您可以使用 useMemo() 钩子(Hook)对其进行优化:

const Component = ({ name }) => (
  const bigArray = useMemo(
    () => [{id: 1, name}, {id: 2, name}],
    [ name ]
  );

   <AnotherComponent data={bigArray} />;
);