背景
在我们开发前端需求时,会遇到多个组件内部状态同步的问题,这些组件往往在 DOM 结构上相距甚远。以网页中常见的“换肤功能”为例,ThemeSwitch
组件在更改内部主题色状态 color
时,希望实时更新其他组件的主题色,实现动态主题切换实时预览功能:
为了实现类似的功能,大家可能会使用 Redux 之类的状态管理库。但是有两个问题值得我们思考:
1.我只是想同步个状态,能简单实现不引入第三方类库么?
2.状态管理类库内部是如何实现的,原理是什么?
问题分析
分析问题的思路有很多,大致可以分为两种:
- 0 - 1 :先把代码跑起来,一步步遇到问题,解决问题;适合解题路径较清晰问题;
- 1 - 0 :从结果出发,分析要想达到该结果的前置条件,追本溯源;适合拆解复杂问题;
这里我们采用 1 - 0 的方法来分析:
1. 通知同步
要想达到状态同步,当主题切换组件 ThemeSwitch
改变内部主题状态,执行 setColor(newColor)
时,我们只要 通知</