开发双语言小型React应用：是否需本地化框架？

Hey there! Totally get where you're coming from—when you're building a small PWA, hauling in a heavy library for just two languages feels like using a sledgehammer to hang a picture. Let's break down some lightweight library options and DIY approaches that work perfectly for simple localization needs:

Lightweight Library Picks #

If you still want the convenience of a library without the bloat, these tiny packages are great fits:

• tiny-i18n-react: Clocks in at under 2KB gzipped, with a dead-simple API. It supports basic string interpolation and language switching, and requires almost zero setup. Perfect for small projects where you don't need advanced features like pluralization or date formatting.
• react-i18nify: Another lean option (~3KB gzipped) that offers both hooks and components for translation. It handles interpolation and optional pluralization, and integrates smoothly with React without adding extra overhead.

DIY: No-Library Localization (For Maximum Control) #

If you want to avoid libraries entirely, building your own system is trivial for two languages. Here are two straightforward approaches:

1. Language Objects + Custom Hook #

Start by defining your translation files for each language:

// locales/en.js
export default {
  greeting: "Hello!",
  welcome: "Welcome to our PWA",
  userProfile: "User Profile",
  welcomeUser: "Welcome, {{name}}!"
};

// locales/zh.js
export default {
  greeting: "你好！",
  welcome: "欢迎来到我们的PWA",
  userProfile: "用户中心",
  welcomeUser: "欢迎你，{{name}}！"
};

Then create a simple context and hook to manage language state and translation:

import { createContext, useContext, useState, useMemo } from 'react';
import en from './locales/en';
import zh from './locales/zh';

const LocaleContext = createContext();

export const LocaleProvider = ({ children, initialLang = 'en' }) => {
  const [lang, setLang] = useState(initialLang);
  const translations = useMemo(() => lang === 'zh' ? zh : en, [lang]);

  // Handle string interpolation for dynamic values
  const t = (key, variables = {}) => {
    let text = translations[key] || key; // Fallback to the key if translation is missing
    Object.entries(variables).forEach(([varKey, value]) => {
      text = text.replace(`{{${varKey}}}`, value);
    });
    return text;
  };

  return (
    <LocaleContext.Provider value={{ lang, setLang, t }}>
      {children}
    </LocaleContext.Provider>
  );
};

export const useLocale = () => useContext(LocaleContext);

Wrap your app with the provider and use the hook in components:

import { LocaleProvider } from './locale';

function App() {
  return (
    <LocaleProvider initialLang="en">
      <MainContent />
    </LocaleProvider>
  );
}

function MainContent() {
  const { t, lang, setLang } = useLocale();
  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('welcomeUser', { name: 'Alice' })}</p>
      <button onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}>
        {lang === 'en' ? '切换到中文' : 'Switch to English'}
      </button>
    </div>
  );
}

2. String Replacement Component #

If you prefer using components over hooks, build a simple <Translate> component:

import { useLocale } from './locale';

export const Translate = ({ id, variables }) => {
  const { t } = useLocale();
  return <>{t(id, variables)}</>;
};

Use it like this in your components:

<Translate id="welcomeUser" variables={{ name: 'Bob' }} />

Final Thoughts #

• If you think your project might grow to support more languages or need advanced features later, go with one of the lightweight libraries—they'll save you time refactoring down the line.
• For a strictly two-language, no-frills PWA, the DIY approach is unbeatable: it's lightweight, fully customizable, and has zero external dependencies.

内容的提问来源于stack exchange，提问作者kumiau