自定义 hook 简单实现 React 状态管理

背景

在我们开发前端需求时，会遇到多个组件内部状态同步的问题，这些组件往往在 DOM 结构上相距甚远。以网页中常见的“换肤功能”为例，ThemeSwitch 组件在更改内部主题色状态 color 时，希望实时更新其他组件的主题色，实现动态主题切换实时预览功能：

为了实现类似的功能，大家可能会使用 Redux 之类的状态管理库。但是有两个问题值得我们思考：

1.我只是想同步个状态，能简单实现不引入第三方类库么？
2.状态管理类库内部是如何实现的，原理是什么？

问题分析

分析问题的思路有很多，大致可以分为两种：

• 0 - 1 ：先把代码跑起来，一步步遇到问题，解决问题；适合解题路径较清晰问题；
• 1 - 0 ：从结果出发，分析要想达到该结果的前置条件，追本溯源；适合拆解复杂问题；

这里我们采用 1 - 0 的方法来分析：

1. 通知同步

要想达到状态同步，当主题切换组件 ThemeSwitch 改变内部主题状态，执行 setColor(newColor)时，我们只要 通知 其他组件执行同样 setColor(newColor) 操作更新自己的状态就行，这样就达到了状态同步目的：

2. 如何通知？

通知其实就是执行各个组件内部的 setColor 方法，这里就需要将 setColor