499 - 《React 国际化方案》

前几天看群里有同学在问，正好 tnf 也需要一套国际化方案，做了下调研。

1、现在 Umi 的国际化方案。基于 react-intl，按需加载 intl 作为补丁。react-intl 由 Yahoo 研发。是 Format.js 生态的一部分。

先在 locales 里定义语言，可以用 .ts 也可以用 .json 。

// src/locales/zh-CN.ts
export default {
  welcome: '欢迎光临 Umi 的世界！',
};

然后使用时用 FormattedMessage 渲染。

import { FormattedMessage } from 'umi';
<FormattedMessage id="welcome" />

也可以拿到 intl 然后去 formatMessage。不推荐，它脱离了 React 的生命周期，可能导致切换语言时无法触发 DOM 的 re-render 。

import { useIntl } from 'umi';
const intl = useIntl();
intl.formatMessage({ id: 'welcome' });

支持动态插值，比如 Hello {name}，<FormattedMessage id="welcome" values={{name: 'fooo'}} />。

支持切换。

import { setLocale } from 'umi';
setLocale('en-US');
// 切换但不刷新
setLocale('en-US', false);
// 切换到默认语言
setLocale();

支持通过配置实现路由 title 的国际化。

2、react-i18next，基于 i18next。周下载 300W+，是 react-intl 的 2-3 倍。

相比 react-intl，react-i18next 的优点是：

1）生态好，大型应用用 react-i18next 更合适
2）国际化文件支持按需加载，性能上会更好
3）SSR 友好
4）TypeScript 支持友好（？）
5）通过 Trans 组件支