Производительность ReactJS: можно ли передавать много данных через реквизит?

Я внедряю многоязычное приложение.
Чтобы сделать изоморфный рендер с выбранным языком возможным, мне нужно передать данные через реквизит непосредственно компонентам.
У меня есть два варианта:

1.
Передать только locale ( enили ruetc…) через реквизит и импортировать языковой файл в каждом компоненте. Результат будет выглядеть как: lang[this.props.locale].A_SPECIFIC_VARIABLE_NAME

2.
Импортируйте языковой файл только в корневом компоненте, определите языковой стандарт также там и передайте весь языковой файл через реквизит каждому компоненту. Результат будет:
this.props.lang.A_SPECIFIC_VARIABLE_NAME

Мне больше нравятся вторые варианты, но я беспокоюсь о производительности. Языковой файл не очень большой (~50кб для каждого языка), но это много в любом случае.

2 ответа

  1. Это нормально, чтобы передать все эти данные через реквизит. Передача данных через реквизит работает так же, как передача данных в качестве входного параметра некоторой функции. Это означает, что если вы передаете объект, массив или функцию, она будет передана в качестве ссылки.

    Ваш объект langвыглядит как обычный объект, поэтому передача будет сделана как ссылка. Это совершенно нормально. Не беспокойтесь о производительности.

  2. В javascript объекты передаются по ссылке, примитивные значения передаются по значению (string, number, boolean, symbol, null, undefined) . Это означает, что для каждого вызова функции выделяются отдельные места в памяти для хранения примитивных значений, передаваемых в качестве аргументов.

    Обычно это не должно быть проблемой, если эти функции не остаются внутри
    память одновременно в течение более длительного периода времени (что может произойти
    через закрытие).

    Такие случаи могут привести к дополнительному потреблению памяти. Однако потребление памяти, как правило, не будет резко увеличиваться, если речь не идет об очень большом количестве вызовов функций.

    Другие факторы

    Однако есть и другие причины, по которым вы могли бы рассмотреть возможность уменьшения количества аргументов (или в данном случае реквизитов), которые передаются функции или компоненту. Например, здесь применяются общие правила для количества аргументов, которые принимает функция. Необходимость более 5 реквизитов обычно указывает на то, что вы должны сделать одно из следующих действий, чтобы сохранить ваш код кратким и обслуживаемым:

    Инкапсуляция сложности в дочерние компоненты

    Определите части компонента, реализующие определенную деталь. Например, вместо передачи нескольких примитивных значений для использования некоторых сведений о пользователе можно создать отдельный компонент и передать ему объект, содержащий все примитивные значения, с помощью контекста или с помощью компонента контейнера (при использовании redux).

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

    Передавать объекты в качестве реквизита вместо примитивных значений

    При передаче нескольких значений в качестве реквизитов компоненту, являющемуся частью одной анатомической структуры, их можно передать вместе как объект. например, в списке пользователей: props userName and userEmail сводится к props user taking a object with all the user its properties.

    Теперь эти свойства не копируются локально в каждый компонент. Использование props.user.nameбудет напрямую ссылаться на исходный адрес в памяти.

    Используйте контекст вместо передачи реквизита в дереве компонентов

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

    Однако, вы должны иметь в виду, что использование контекста слишком много сделает
    ваш код труднее читать.

    Обычно лучше использовать компоненты контейнера, которые извлекают ваши данные, форматируют их и передают в фактический (презентационный) компонент.