React应用如何保存用户所选语言并实现全局语言切换

需求目标 #

• 存储用户选中的语言选项
• 通过选择器完成语言切换
• 切换后的语言效果全局生效
  

原有代码问题 #

原有实现将语言值存在单组件本地state中，仅当前组件可访问，无法全局同步，且刷新页面后配置会丢失，提交参数拼接时缺少参数key，易出现传参错误。原有代码片段如下：

<SelectsLanguages
  languages={languages}
  onChange={languages => setState(prev => ({...prev, user__languages : languages}))}
  value={state.user__languages}
  name="user__languages"
/>

const [state, setState] = useState(
  { user__languages: urlParams.get('user__languages') || "" }
);

const onSubmit = () => {
  const params = `&${state.user__languages.length ? state.user__languages : '' }`;
}

具体实现步骤 #

1. 搭建全局语言状态+持久化能力 #

使用React Context实现全局状态，同时做本地持久化，保证刷新不丢配置，初始化时按「URL参数 > 本地缓存 > 默认语言」的优先级取值：

// LanguageContext.js 全局语言状态文件
import { createContext, useContext, useState, useEffect } from 'react';

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const urlParams = new URLSearchParams(window.location.search);
  // 初始化语言值
  const initLang = urlParams.get('user__languages') || localStorage.getItem('app_lang') || 'zh-CN';
  const [currentLang, setCurrentLang] = useState(initLang);

  // 语言变更时同步更新本地缓存和URL参数
  useEffect(() => {
    localStorage.setItem('app_lang', currentLang);
    const currentUrl = new URL(window.location);
    currentUrl.searchParams.set('user__languages', currentLang);
    window.history.replaceState({}, '', currentUrl);
  }, [currentLang]);

  return (
    <LanguageContext.Provider value={{ currentLang, setCurrentLang }}>
      {children}
    </LanguageContext.Provider>
  );
}

// 自定义hook，供业务组件调用获取全局语言状态
export function useLanguage() {
  return useContext(LanguageContext);
}

2. 根组件注入全局状态 #

在应用入口用LanguageProvider包裹根组件，让全局状态对所有子组件生效：

// main.jsx 应用入口文件
import { LanguageProvider } from './LanguageContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <LanguageProvider>
    <App />
  </LanguageProvider>
)

3. 改造原有选择器组件 #

移除组件本地存储语言的state，直接调用全局状态的读写方法：

// 业务组件中使用语言选择器
import { useLanguage } from './LanguageContext';

// 读取全局语言状态和修改方法
const { currentLang, setCurrentLang } = useLanguage();

// 选择器组件绑定全局状态
<SelectsLanguages
  languages={languages}
  onChange={lang => setCurrentLang(lang)}
  value={currentLang}
  name="user__languages"
/>

// 修正原有提交逻辑的参数拼接问题
const onSubmit = () => {
  const params = currentLang.length ? `&user__languages=${currentLang}` : '';
  // 后续提交逻辑
}

4. 全局多语言适配 #

所有需要根据语言切换文案/配置的组件，都可以通过useLanguage()获取当前最新的语言值，语言切换时所有组件会自动重渲染，实现全局生效的效果。

内容的提问来源于stack exchange，提问作者Azamat RA