i18next 是什么？核心特性和插件体系详解

i18next 是 JavaScript 生态中最成熟的国际化框架，核心定位是"框架无关的翻译运行时"。它不绑定 React/Vue/Angular，核心库可以在 Node.js、浏览器、React Native 任何环境运行。核心特性包括：命名空间——把翻译按模块拆成多个 JSON，按需加载，避免单文件膨胀；插值——{{name}} 语法在翻译文本中嵌入动态值，支持格式化函数；复数——内置各语言的复数规则（英语 1 item / 2 items，阿拉伯语有 6 种复数形式），不需要手动判断；延迟加载——配合 i18next-http-backend 按语言+命名空间异步加载，首屏只拉当前语言的核心翻译；插件生态——语言检测、缓存、后端加载全部通过 .use() 注入，核心包保持精简。与 react-intl、vue-i18n 相比，i18next 的优势在于跨框架复用同一套翻译资源和配置逻辑，以及更灵活的插件体系。

追问

i18next 和 react-i18next 是什么关系？

i18next 是纯翻译引擎，不关心 UI 框架。react-i18next 是 i18next 的 React 绑定层，提供 useTranslation hook、<Trans> 组件、withTranslation HOC。它通过 initReactI18next 插件把 i18next 实例挂到 React context 上，组件内调用 useTranslation() 时能响应语言切换并触发重渲染。不用 react-i18next 直接在 React 里调 i18next.t() 也行，但语言切换后组件不会自动更新——你得手动监听 languageChanged 事件再 forceUpdate。

插值 {{}} 和 组件分别适合什么场景？

简单变量替换用 {{name}} 插值：t('greeting', { name: '张三' })，翻译文件写 "greeting": "你好，{{name}}"。当翻译文本包含 React 组件（比如 <strong>、<Link>）时必须用 <Trans>：<Trans>阅读<Link to="/terms">条款</Link></Trans>，i18next 会把组件位置记录为索引占位符，翻译文件里写 "阅读<1>条款</1>"。混用没问题，但不要在 <Trans> 内部再嵌套 {{}} 做复杂逻辑，翻译人员看不懂。

复数处理在不同语言下有什么坑？

英语只需要 item 和 items 两个 key。斯拉夫语系（俄语、波兰语）有 3-4 种复数形式，阿拉伯语有 6 种，i18next 内置了 CLDR 复数规则能自动处理，但你得在翻译文件里提供完整的 key："item_zero"、"item_one"、"item_two"、"item_few"、"item_many"、"item_other"。常见坑是只写了 item 和 item_plural，切换到俄语时所有数量都回退到 item_other。另一个坑是 count 参数必须传数字类型，传字符串 "2" 不会触发复数逻辑。

延迟加载的翻译在组件首次渲染时闪烁怎么办？

i18next-http-backend 异步加载翻译，组件首次渲染时翻译还没到，t('key') 返回 key 本身。解决方案有三种：一是用 React Suspense 包裹根组件，useTranslation 内部会 suspend 直到翻译加载完成；二是检查 useTranslation 返回的 ready 状态，ready 为 false 时显示 loading；三是在 SSR 场景下把翻译资源预注入到 HTML，客户端直接从 window.__I18N_DATA__ 读取，跳过首次请求。方案一最简洁，但需要 React 18+ 的 Suspense 支持。