i18next 生态 vs react-intl：架构、用法与场景深度解析

在构建多语言 React 应用时，i18next 生态（含 react-i18next）与 react-intl 是最常见的两个选择。它们都能解决翻译问题，但底层逻辑和开发体验完全不同。

🏗️ 核心架构：独立引擎 vs 集成方案

i18next 是一个独立的国际化引擎，不依赖任何前端框架。

• 你需要单独初始化实例，配置资源路径。
• 可以在 React 之外（如工具函数、Node.js）直接使用。

// i18next: 独立初始化
import i18n from 'i18next';
i18n.init({
  resources: { en: { translation: { key: 'Hello' } } }
});
//  anywhere: i18n.t('key')

react-i18next 是 i18next 的 React 绑定层。

• 它依赖 i18next 实例，提供 Provider 和 Hooks。
• 专注于将翻译能力注入 React 组件树。

// react-i18next: React Provider
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'; // 上面初始化的实例

function App() {
  return <I18nextProvider i18n={i18n}><Home /></I18nextProvider>;
}

react-intl 是 FormatJS 生态的一部分，专为 React 设计。

• 通过 IntlProvider 注入区域设置和消息映射。
• 强依赖 ICU 格式，配置通常集中在 provider 层级。

// react-intl: IntlProvider
import { IntlProvider } from 'react-intl';
import messages from './locales/en.json';

function App() {
  return <IntlProvider locale="en" messages={messages}><Home /></IntlProvider>;
}

📝 翻译调用：函数 vs 组件 vs Hook

i18next 核心提供简单的 t 函数。

• 在任何地方导入实例即可调用。
• 适合非组件环境，如逻辑层或配置文件。

// i18next: 核心调用
import i18n from './i18n';
const text = i18n.t('common.save'); // "Save"

react-i18next 推荐使用 useTranslation Hook。

• 在函数组件中获取 t 函数和 i18n 实例。
• 支持命名空间懒加载，优化包体积。

// react-i18next: Hook 用法
import { useTranslation } from 'react-i18next';

function Home() {
  const { t } = useTranslation('common');
  return <button>{t('save')}</button>;
}

react-intl 提供 useIntl Hook 和 <FormattedMessage> 组件。

• Hook 用于获取格式化函数（如日期、数字）。
• 组件用于声明式文本渲染，支持富文本片段。

// react-intl: Hook 与组件
import { useIntl, FormattedMessage } from 'react-intl';

function Home() {
  const intl = useIntl();
  return (
    <div>
      <FormattedMessage id="common.save" />
      <span>{intl.formatNumber(1000)}</span>
    </div>
  );
}

🧩 JSX 插值：灵活嵌入 vs 严格格式

i18next 核心处理字符串插值，不直接处理 JSX。

• 变量替换通过 {var} 语法，返回纯字符串。
• 若需嵌入组件，需配合 react-i18next 的 <Trans>。

// i18next: 字符串插值
// resources: { key: 'Hello {{name}}' }
i18n.t('key', { name: 'World' }); // "Hello World"

react-i18next 的 <Trans> 组件允许直接在翻译中写 JSX。

• 翻译文件中用 <0>...</0> 占位，代码中对应组件。
• 非常适合需要加粗、链接的混合内容。

// react-i18next: Trans 组件
// resources: { key: 'Read <0>more</0>' }
<Trans i18nKey="key">
  <a href="/more">more</a>
</Trans>

react-intl 使用 ICU 富文本格式。

• 翻译文件中定义 <bold>...</bold> 标签。
• 在 values 属性中映射这些标签到 React 组件。

// react-intl: 富文本映射
// messages: { key: 'Read <bold>more</bold>' }
<FormattedMessage
  id="key"
  values={{ bold: (str) => <strong>{str}</strong> }}
/>

🔢 复数处理：配置驱动 vs 标准驱动

i18next 通过配置规则处理复数。

• 支持自定义规则，适应特殊语言环境。
• 翻译文件中通过 _plural 后缀区分。

// i18next: 复数键
// resources: { key: 'Item', key_plural: 'Items' }
i18n.t('key', { count: 2 }); // "Items"

react-i18next 继承核心能力，使用 count 参数。

• 自动根据数量选择正确的翻译键。
• 支持在 <Trans> 中直接使用 count。

// react-i18next: Hook 复数
const { t } = useTranslation();
t('item', { count: 1 }); // "Item"
t('item', { count: 5 }); // "Items"

react-intl 严格遵循 ICU 复数语法。

• 使用 {count, plural, one {...} other {...}} 格式。
• 标准统一，但翻译文件编写复杂度较高。

// react-intl: ICU 复数
// messages: { key: '{count, plural, one {Item} other {Items}}' }
<FormattedMessage id="key" values={{ count: 5 }} />

📊 总结对比

💡 选型建议

i18next 核心库 是底层基石，通常不单独在 React 项目中使用，而是作为 react-i18next 的依赖。如果你的架构需要跨越多个框架（如 React 和 Vue 混用）或需要在 Node.js 服务端共用翻译逻辑，应直接依赖 i18next 核心。

react-i18next 是 React 项目中最灵活的选择 — 它允许你在翻译文本中直接嵌入组件，无需复杂的映射配置，开发体验流畅。适合大多数现代 React 应用，尤其是内容动态性强、需要频繁调整翻译结构的场景。

react-intl 适合对标准化有强要求的团队。ICU 格式虽然学习曲线稍陡，但能确保翻译文件在不同平台间的一致性。如果你的项目需要严格的翻译管理流程或已在使用 FormatJS 套件，它是更稳妥的选择。

最终建议：对于大多数 React 项目，react-i18next 提供了更好的开发体验和灵活性。只有在需要严格遵循 ICU 标准或已有 FormatJS 基础设施时，才优先考虑 react-intl。