Имеет ли значение, где вы вызываете useContext в React?

Например, если я получил массив (в примере 4 элемента, в реальном 50):

export default ["foo", "bar", "faz", "moo"];

Допустим, я получил компонент, который отображает данные:

import React, { useContext } from 'react';
import PreferenceContext from '../contexts/PreferenceContext';

export default props => {
  const { accentColor } = useContext(PreferenceContext);

  return (
    <div style={{ color: accentColor }}>
      {props.foo}
    </div>
  );
}

затем я повторно использую этот компонент в родительском компоненте

// FooCollection.js
import React from 'react';
import FooDisplay from './FooDisplay';
import fooArray from '../data/fooArray';

export default () => {
  return fooArray.map(fooItem => <FooDisplay foo={fooItem} />
}

это приводит к тому, что компонент FooDisplay будет отображаться, умножив количество элементов в массиве (таким образом, вызывая useContext столько же раз). Итак, если я получу массив большего размера с большим количеством элементов, заметно ли это повлияет на производительность? Или мне лучше использовать useContext в компоненте-оболочке (parent) и передать предпочтение с помощью props?

на самом деле компонент вложен трижды, это вызывает беспорядок при передаче реквизита, поэтому я использовал контекст, однако я могу представить, что это замедляет работу приложения, если оно вызывает контекст так много раз


reactjs use-context
person Thimma    schedule 06.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не проводите предварительную оптимизацию.

React действительно быстр и может выполнять миллионы операций в секунду, так что вы не заметите падения.

Если вы заметили задержку, измерьте, насколько она медленная на самом деле, попытайтесь оптимизировать ее и посмотрите, действительно ли это увеличивает скорость. Если не вернуть. Но не беспокойтесь, пока не заметите отставание.

Но до тех пор не заморачивайтесь и сосредоточьтесь на написании поддерживаемого кода.

person Domino987    schedule 06.06.2020