DEV Community
·
# 🌗 如何在React中使用MobX实现主题切换
💡
原文英文，约300词，阅读约需2分钟。
📝
内容提要
本文介绍了如何在React中使用MobX实现主题切换（明暗模式）。首先安装MobX，创建包含可观察状态和切换方法的主题存储。然后在React组件中使用该存储，以确保组件在主题变化时重新渲染。最后，修改入口文件以渲染主题切换器，运行应用即可实现主题切换功能。
🎯
关键要点
- 主题切换（明暗模式）是网站上广泛使用的功能。
- 第一步：在React项目中安装MobX，使用命令npm install mobx mobx-react-lite。
- 第二步：创建MobX主题存储，包含可观察状态和切换方法。
- 主题存储包含一个可观察状态theme，初始值为'light'，以及一个切换主题的方法toggleTheme。
- 第三步：在React组件中使用MobX存储，确保组件在主题变化时重新渲染。
- 使用observer()确保组件在themeStore.theme变化时重新渲染。
- 第四步：修改入口文件以渲染主题切换器。
- 运行应用程序，点击按钮即可实现主题切换功能。
❓
延伸问答
如何在React项目中安装MobX？
在React项目中使用命令npm install mobx mobx-react-lite安装MobX。
MobX主题存储的主要功能是什么？
MobX主题存储包含一个可观察状态theme和一个切换主题的方法toggleTheme。
如何确保React组件在主题变化时重新渲染？
使用observer()函数确保组件在themeStore.theme变化时重新渲染。
如何在React中实现主题切换功能？
通过创建MobX主题存储、使用observer()包裹组件，并在入口文件中渲染主题切换器来实现主题切换功能。
主题切换器的按钮有什么功能？
按钮用于在明暗模式之间切换，动态更新显示的模式。
如何运行包含主题切换功能的React应用？
使用命令npm start运行应用程序，然后点击按钮即可实现主题切换。
➡️
