Реализация собственного движка локализации в React. js - стоит ли это того? - PullRequest
Новая
       0

Реализация собственного движка локализации в React. js - стоит ли это того?

3 голосов
/ 17 февраля 2020

Я решил написать свой собственный механизм локализации, используя реакционные хуки. Мне не нужно слишком много локализаций, я просто хочу отображать сообщения в зависимости от выбранной локали. У меня есть несколько вопросов о производительности и т. Д. c.

Это мой компонент перевода, который просто возвращает сообщение по заданному ключу: 

import React from 'react';
import useLocale from 'store/LocaleContext';

export default ({ k }) => {
  const { messages } = useLocale();

  const msg = messages[k] ? messages[k] : k;

  return <>{msg}</>;
};

Как вы можете видеть, он использует реакционные хуки и я сообщения асинхронно загружаются в провайдер контекста.

Мое приложение - это проект среднего размера, поэтому я планирую использовать в нем 50-100 или более компонентов <Translate k="messagekey" />.

Влияет ли это на мое приложение? производительность, если так много компонентов подписаны на один контекст, который предоставил около 5-6 КБ данных? (Я имею в виду, что сообщения будут иметь размер около 5-10 КБ.)

Хорошо ли использовать этот движок вместо react-intl или react-i18n, если я игнорирую другие проблемы с локализацией (дата, время, валюта, номер ..., только для сообщений)?

Редактировать:

https://codesandbox.io/s/test-localisations-8kynz Это примеры кодов и ссылка на ящик.

Вы можете видеть целые файлы локализации, которые я создал.

Также я добавил функцию перевода, которая не возвращает компонент, а только переведенное сообщение. Это хорошая практика?

1 Ответ

1 голос
/ 17 февраля 2020

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

В описываемом вами случае я могу вспомнить два сценария ios.

Загружаются ли все сообщения одновременно ?

В этом случае у вас будет начальный рендер и еще один после выборки данных. С этого момента данные не изменятся, и провайдер не будет запускать новые рендеры.

Обновляются ли сообщения / добавляются несколько раз?

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

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

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

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

...