在 React 中记住大型数组操作有意义吗？

Question

假设我有一个组件：

export const MyComponent = ({largeArray}) => {
    const arrayINeed = largeArray.sort()
}

据我了解，每次重新渲染largeArray.sort()时都会被调用，如果很大，这不会引起一定程度的性能问题吗？MyComponentlargeArray

在这种情况下，像这样记住结果是否更好？：

export const MyComponent = ({largeArray}) => {
    const sortedArray = useMemo(() => largeArray.sort(), [largeArray])
}

Answer 1

是的。同样重要的是要认识到您正在通过调用其方法来改变传入 props 的数组sort。相反，将数组展开到一个新数组中并对新数组进行排序：

import {useMemo} from 'react';

export const MyComponent = ({largeArray}) => {
  const sortedArray = useMemo(() => [...largeArray].sort(), [largeArray]);
}