Инициализация массива в рендере компонента 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() крючок для его оптимизации:

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

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

Answer 2

К сожалению, при использовании React.Component или React.FunctionnalComponent кажется, что каждое отдельное изменение будет повторно отображать весь массив.

Мы можем рассмотреть возможность использования React.PureComponent в качестве обходного пути для решения этой проблемы, дополнительная информация здесь: https://codeburst.io/react-array-re-render-performance-ee23f34c5d66

Answer 3

Лучше, если вы переместите bigArray, тогда (учитывая, что он не изменится) в более глобальное состояние.

// let's imagine there is a lot of large objects
const bigArray = [{id: 1, name}, {id: 2, name}];

// name props is passed in so it seems like there is a point in initializing the array inside the component
const Component = ({ name }) => {
  return <AnotherComponent data={bigArray} />;
}