主题
React 项目实践
如何实现 React 应用的国际化和主题切换？
国际化和主题是运行时契约问题，要同时处理文本、格式、路由、首屏一致性和设计 token。
面试官想考什么
- 语言由 URL、Cookie 还是浏览器偏好决定？ 考察产品和技术取舍。
- 如何避免首屏语言闪烁和 hydration mismatch？ 考察渲染一致性。
- 日期、数字、复数和 RTL 如何处理？ 考察完整性。
- 主题如何避免组件各自写颜色？ 考察 Design System 思维。
一句话回答
text
国际化要统一语言确定、资源加载和格式化策略，主题要通过语义 token 驱动，并保证服务端首屏与客户端接管使用同一上下文。面试回答详解
1. 语言策略
语言优先级可以是显式 URL、用户设置、Cookie、浏览器偏好，必须定义冲突时的规则。翻译资源按语言和路由/领域拆分，避免首屏加载全部词条。
2. 格式化
使用 Intl 或成熟库处理日期、数字、货币、时区、复数和相对时间。不要把字符串拼接当成复数规则，也不要在服务端和客户端使用不同 locale。
3. 主题策略
用 CSS variables 和语义 token 表达 surface/text/border/action，组件不直接依赖品牌色。主题切换要提前设置初始属性，减少闪烁；用户偏好、系统偏好和租户主题要有优先级。
4. 生产边界
测试长文本、缺失翻译、RTL、字体、日期边界、无障碍对比度和缓存隔离。翻译资源加载失败要有默认语言或局部降级，不应让整页白屏。
可直接背诵的 30 秒回答
text
我会先确定语言来源和优先级，再按路由或领域加载翻译资源，使用 Intl 处理日期、数字、货币和复数。主题通过语义 CSS token 驱动，首屏和客户端使用同一语言与主题上下文，避免闪烁和 hydration mismatch。测试会覆盖长文本、RTL、缺失翻译、时区和可访问性。扩展知识
多语言检查清单
- URL 和 SEO 是否可被分享和索引？
- 服务端与客户端 locale 是否一致？
- 翻译资源是否按需加载？
- 文本变长后布局是否仍然可用？
- 日期、数字、货币和时区是否使用统一规则？
面试官追问链
追问一：为什么会出现 hydration mismatch？
- 考察点：是否理解首屏确定性。
- 回答方向：检查服务端和客户端 locale、时区、随机值、时间、系统主题和异步资源是否不同；把非确定性移出首次渲染。
追问二：主题切换为什么会闪烁？
- 考察点：是否有首屏性能和体验意识。
- 回答方向：在渲染前确定主题属性或使用服务端/Cookie 上下文，避免依赖 hydration 后才写入 DOM。
追问三：缺少翻译 key 怎么办？
- 考察点：是否有降级策略。
- 回答方向：开发期构建告警，运行时显示默认语言或安全 fallback，同时上报 key、语言和版本。