[!info] related notes

• 所属 MOC: React MOC
• 上位主题: React
• 相关概念: useContext, react-component-design-principles

react-intl

react-intl 是 React 生态中常见的国际化库。它基于浏览器和 JavaScript 的 Intl 能力，为 React 应用提供消息翻译、日期格式化、数字格式化和复数处理等能力。

一句话定义

react-intl 不是简单的“文案字典”，而是一套把语言环境、格式化规则和组件渲染结合起来的国际化方案。

它解决什么问题

• 根据当前语言切换文本内容
• 统一处理日期、时间、数字、货币等格式
• 让国际化能力通过 React 组件树稳定下沉

最核心的两个入口

IntlProvider

它负责在应用上层提供当前语言、消息字典和格式化上下文。

intl 对象

它是实际执行格式化和取文案的工具对象，常通过 useIntl() 获取。

最常见的用法

import { IntlProvider, useIntl } from 'react-intl'

function SaveButton() {
  const intl = useIntl()

  return <button>{intl.formatMessage({ id: 'common.save', defaultMessage: 'Save' })}</button>
}

intl 最常见的能力

• formatMessage()：取翻译文本
• formatDate()：格式化日期
• formatNumber()：格式化数字或货币

useIntl 和 injectIntl 怎么看

• 函数组件里，通常优先用 useIntl
• injectIntl 更像旧风格 HOC 写法，在老项目里仍可能看到

和 React 主线的关系

react-intl 本质上是一个建立在 React Context 之上的生态库，所以理解它时，也可以顺手回看 useContext。

常见误区

只把它当翻译工具

它同时也负责日期、数字、货币和复数规则的本地化。

在组件里硬编码文案 key 组织方式

国际化真正难的地方常常不是 API，而是消息结构、命名约定和团队维护成本。

不区分库能力和产品文案体系

react-intl 提供的是实现机制，不会自动替你设计文案组织方式。

最短记忆方式

react-intl = React 中基于 Intl 的国际化基础设施。

Related notes

• React MOC