到目前為止，知命境這個(gè)合集里已經(jīng)包含了大量的內(nèi)容，足夠我們在 React 上成為成為一名高手，也有許多付費(fèi)群里的朋友陸陸續(xù)續(xù)靠合集里的內(nèi)容找到了更好的工作，也算是把之前對群友承諾的坑補(bǔ)齊了，延后了很久實(shí)在是抱歉。后續(xù) React 知命境的內(nèi)容會根據(jù)大家在群里的疑問補(bǔ)充一些東西。

在實(shí)現(xiàn)國際化之前，我們要考慮一個(gè)比較嚴(yán)肅的問題，就是商用項(xiàng)目是否應(yīng)該利用翻譯軟件自動翻譯結(jié)果？

答案是：不應(yīng)該。

這里的核心問題不是說翻譯不準(zhǔn)確，最嚴(yán)重的問題是自動翻譯會可能出現(xiàn)不符合當(dāng)?shù)厝苏Z言習(xí)慣、不符合當(dāng)?shù)胤蓷l文等情況，從而導(dǎo)致項(xiàng)目推廣受到不可控的阻礙。

因此國際化項(xiàng)目的核心內(nèi)容，都應(yīng)該有專業(yè)的翻譯團(tuán)隊(duì)來處理語言翻譯問題。

從技術(shù)角度上來說，自動翻譯還會出現(xiàn)的情況是翻譯結(jié)果單詞過長，會導(dǎo)致布局出現(xiàn)混亂。因此翻譯結(jié)果就會有一些限制。

明確了這個(gè)前提，我們再來思考具體的功能應(yīng)該如何實(shí)現(xiàn)。不然很多團(tuán)隊(duì)在自動翻譯上踩坑之后才明白過來，就很得不償失了。

一、數(shù)據(jù)驅(qū)動 UI

在數(shù)據(jù)驅(qū)動 UI 的考慮之下，我們很容易能夠想到實(shí)現(xiàn)方案，因?yàn)槲淖謨?nèi)容成為了變化量，所以文字內(nèi)容就應(yīng)該抽象成具體的數(shù)據(jù)。

結(jié)合語言切換，會導(dǎo)致文字內(nèi)容發(fā)生變化，那么很容易能夠想到，我們應(yīng)該設(shè)計(jì)一個(gè)狀態(tài)，來表示當(dāng)前選中的語言是什么。

const [local, setLocal] = useState<I18nType>('zh_cn')

這個(gè)狀態(tài)會影響到整個(gè)項(xiàng)目，因此在 React 中，我們可以把該狀態(tài)設(shè)計(jì)成為全局狀態(tài)。

我們只需要選擇一種全局狀態(tài)管理方案來做即可。我這里選擇我自己設(shè)計(jì)的狀態(tài)管理工具 mozz。

首先設(shè)計(jì)一個(gè)自定義 hook 用于存儲狀態(tài) local。

import { useState } from "react";

export type I18nType = 'zh_cn' | 'zh_en'

export function useI18n() {
  const [local, setLocal] = useState<I18nType>('zh_cn')
  return {local, setLocal}
}

然后引入 mozz，把該自定義 hook 轉(zhuǎn)化為全局 store。

import { useState } from "react";
+ import {createStore} from 'mozz'

export type I18nType = 'zh_cn' | 'zh_en'

export function useI18n() {
  const [local, setLocal] = useState<I18nType>('zh_cn')
  return {local, setLocal}
}

+ export const {Provider, useStore} = createStore(useI18n)

然后在項(xiàng)目入口文件中，使用 Provider 包裹項(xiàng)目頂層父組件。

import {Provider} from './useI18n'
import App from './App'

export default function I18nApp() {
  return (
    <Provider>
      <App />
    </Provider>
  )
}

這樣，在任意子組件，我們就可以通過 useStore 拿到剛才自定義 hook 中的狀態(tài)。

import {useStore} from "./useI18n";

const hw = {
  'zh_cn': '你好，世界！',
  'zh_en': 'hello world!'
}

export default function App() {
  const {local} = useStore()
  return (
    <div>
      <div>{hw[local]}</div>
    </div>
  )
}

簡單吧。

我們可以引入一個(gè)切換語言的功能，實(shí)現(xiàn)也非常簡單，就是利用 useStore 拿到 setLocal 去改變值即可。

import {useStore} from './useI18n'

const switchLanguage = {
  'zh_cn': '中文',
  'zh_en': 'english'
}

export default function ChangeLanguage() {
  const {local, setLocal} = useStore()

  function onclick() {
    if (local === 'zh_cn') {
      setLocal('zh_en')
    }
    if (local === 'zh_en') {
      setLocal('zh_cn')
    }
  }

  return (
    <div>
      <button onClick={onclick}>
        {switchLanguage[local]}
      </button>
    </div>
  )
}

將該組件引入到 App 中。

+ import ChangeLanguage from "./ChangeLanguage";
import {useStore} from "./useI18n";

const hw = {
  'zh_cn': '你好，世界！',
  'zh_en': 'hello world!'
}

export default function App() {
  const {local} = useStore()
  return (
    <div>
+     <ChangeLanguage />
      <div>{hw[local]}</div>
    </div>
  )
}

一個(gè)簡易的國際化應(yīng)用就實(shí)現(xiàn)了。

組件的擴(kuò)展也非常簡單，你要創(chuàng)建新的組件支持國際化，只需要使用 useStore 拿到我們剛才設(shè)計(jì)的狀態(tài) local 即可。文章里就不繼續(xù)擴(kuò)展了。

二、語言包如何維護(hù)

我們通過切換狀態(tài) local，從一個(gè)語言的配置項(xiàng)中獲取到對應(yīng)的文案內(nèi)容。這里還有一個(gè)關(guān)鍵的問題就是，語言的配置文件應(yīng)該如何維護(hù)。

這里有兩種思考。

一種就是如果你的項(xiàng)目可以支持自定義語言包。那么就需要把整個(gè)項(xiàng)目所有的語言配置都寫在同一個(gè)文件里，例如中文語言包。

// zh_cn.ts
const language = {
  global: '請選擇',
  // 表示唯一基礎(chǔ)組件
  Table: {
    filterTtitle: '篩選',
    ...
  },
  // 表示唯一頁面組件
  personal: {
    info: '個(gè)人信息',
  }
}

然后每支持一種語言，我們就會維護(hù)一個(gè)語言包文件。根據(jù) local 去選擇使用具體的語言包。

這樣，當(dāng)你需要新增其他的外置語言包的時(shí)候，只需要給項(xiàng)目提供一個(gè)這樣的格式統(tǒng)一的文件即可。

另外一種思路就是拆分維護(hù)。每個(gè)組件只維護(hù)自己的語言配置項(xiàng)。這樣做的好處就是開發(fā)時(shí)會輕松很多，不需要去全局的語言包里修改或者新增內(nèi)容。

例如在 antd 中，在每個(gè)稍微復(fù)雜的組件都單獨(dú)維護(hù)了自己的多語言配置。

這種方式不需要考慮外部插件支持，只需要考慮自己內(nèi)部維護(hù)，因此實(shí)現(xiàn)方式上就會靈活很多。

三、總結(jié)

國際化的實(shí)現(xiàn)在 React 中并不難，屬于看完就學(xué)會的一個(gè)知識點(diǎn)。只是在商用項(xiàng)目中，完善起來比較繁瑣。更多的工作量體現(xiàn)在語言包的維護(hù)上。稍有差錯就是 bug。