盧偉冰長(zhǎng)文解析K60至尊版 對(duì)Redmi有著里程碑式的意義
在今天的Redmi后性能時(shí)代戰(zhàn)略發(fā)布會(huì)結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來了一篇長(zhǎng)文，詳解了為什么 Redmi 要開啟后性能時(shí)代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
到目前為止，知命境這個(gè)合集里已經(jīng)包含了大量的內(nèi)容，足夠我們?cè)?React 上成為成為一名高手，也有許多付費(fèi)群里的朋友陸陸續(xù)續(xù)靠合集里的內(nèi)容找到了更好的工作，也算是把之前對(duì)群友承諾的坑補(bǔ)齊了，延后了很久實(shí)在是抱歉。后續(xù) React 知命境的內(nèi)容會(huì)根據(jù)大家在群里的疑問補(bǔ)充一些東西。
在實(shí)現(xiàn)國(guó)際化之前，我們要考慮一個(gè)比較嚴(yán)肅的問題，就是商用項(xiàng)目是否應(yīng)該利用翻譯軟件自動(dòng)翻譯結(jié)果？
答案是：不應(yīng)該。
這里的核心問題不是說翻譯不準(zhǔn)確，最嚴(yán)重的問題是自動(dòng)翻譯會(huì)可能出現(xiàn)不符合當(dāng)?shù)厝苏Z(yǔ)言習(xí)慣、不符合當(dāng)?shù)胤蓷l文等情況，從而導(dǎo)致項(xiàng)目推廣受到不可控的阻礙。
因此國(guó)際化項(xiàng)目的核心內(nèi)容，都應(yīng)該有專業(yè)的翻譯團(tuán)隊(duì)來處理語(yǔ)言翻譯問題。
從技術(shù)角度上來說，自動(dòng)翻譯還會(huì)出現(xiàn)的情況是翻譯結(jié)果單詞過長(zhǎng)，會(huì)導(dǎo)致布局出現(xiàn)混亂。因此翻譯結(jié)果就會(huì)有一些限制。
明確了這個(gè)前提，我們?cè)賮硭伎季唧w的功能應(yīng)該如何實(shí)現(xiàn)。不然很多團(tuán)隊(duì)在自動(dòng)翻譯上踩坑之后才明白過來，就很得不償失了。
在數(shù)據(jù)驅(qū)動(dòng) UI 的考慮之下，我們很容易能夠想到實(shí)現(xiàn)方案，因?yàn)槲淖謨?nèi)容成為了變化量，所以文字內(nèi)容就應(yīng)該抽象成具體的數(shù)據(jù)。
結(jié)合語(yǔ)言切換，會(huì)導(dǎo)致文字內(nèi)容發(fā)生變化，那么很容易能夠想到，我們應(yīng)該設(shè)計(jì)一個(gè)狀態(tài)，來表示當(dāng)前選中的語(yǔ)言是什么。
const [local, setLocal] = useState<I18nType>('zh_cn')這個(gè)狀態(tài)會(huì)影響到整個(gè)項(xiàng)目，因此在 React 中，我們可以把該狀態(tài)設(shè)計(jì)成為全局狀態(tài)。
我們只需要選擇一種全局狀態(tài)管理方案來做即可。我這里選擇我自己設(shè)計(jì)的狀態(tài)管理工具 mozz。
首先設(shè)計(jì)一個(gè)自定義 hook 用于存儲(chǔ)狀態(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> )}簡(jiǎn)單吧。
我們可以引入一個(gè)切換語(yǔ)言的功能，實(shí)現(xiàn)也非常簡(jiǎ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è)簡(jiǎn)易的國(guó)際化應(yīng)用就實(shí)現(xiàn)了。
組件的擴(kuò)展也非常簡(jiǎn)單，你要?jiǎng)?chuàng)建新的組件支持國(guó)際化，只需要使用 useStore 拿到我們剛才設(shè)計(jì)的狀態(tài) local 即可。文章里就不繼續(xù)擴(kuò)展了。
我們通過切換狀態(tài) local，從一個(gè)語(yǔ)言的配置項(xiàng)中獲取到對(duì)應(yīng)的文案內(nèi)容。這里還有一個(gè)關(guān)鍵的問題就是，語(yǔ)言的配置文件應(yīng)該如何維護(hù)。
這里有兩種思考。
一種就是如果你的項(xiàng)目可以支持自定義語(yǔ)言包。那么就需要把整個(gè)項(xiàng)目所有的語(yǔ)言配置都寫在同一個(gè)文件里，例如中文語(yǔ)言包。
// zh_cn.tsconst language = { global: '請(qǐng)選擇', // 表示唯一基礎(chǔ)組件 Table: { filterTtitle: '篩選', ... }, // 表示唯一頁(yè)面組件 personal: { info: '個(gè)人信息', }}然后每支持一種語(yǔ)言，我們就會(huì)維護(hù)一個(gè)語(yǔ)言包文件。根據(jù) local 去選擇使用具體的語(yǔ)言包。
這樣，當(dāng)你需要新增其他的外置語(yǔ)言包的時(shí)候，只需要給項(xiàng)目提供一個(gè)這樣的格式統(tǒng)一的文件即可。
另外一種思路就是拆分維護(hù)。每個(gè)組件只維護(hù)自己的語(yǔ)言配置項(xiàng)。這樣做的好處就是開發(fā)時(shí)會(huì)輕松很多，不需要去全局的語(yǔ)言包里修改或者新增內(nèi)容。
例如在 antd 中，在每個(gè)稍微復(fù)雜的組件都單獨(dú)維護(hù)了自己的多語(yǔ)言配置。
這種方式不需要考慮外部插件支持，只需要考慮自己內(nèi)部維護(hù)，因此實(shí)現(xiàn)方式上就會(huì)靈活很多。
國(guó)際化的實(shí)現(xiàn)在 React 中并不難，屬于看完就學(xué)會(huì)的一個(gè)知識(shí)點(diǎn)。只是在商用項(xiàng)目中，完善起來比較繁瑣。更多的工作量體現(xiàn)在語(yǔ)言包的維護(hù)上。稍有差錯(cuò)就是 bug。
本文鏈接：http://www.www897cc.com/showinfo-26-88738-0.htmlReact 中的國(guó)際化優(yōu)秀實(shí)踐
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)