基于 React Context 实现一个简单的状态管理

前言

在大多数情况下，我们开发项目都需要一个状态管理，方便我们在全局共享状态库，在React生态里比较流行的几个库

redux、mobx、recoil

但是对于小项目，我们完全可以自己封装一个状态管理，减少一个包的安装就可以减小打包以后的项目体积。 主要分两步：

1.封装一个顶层组件提供数据
2.子组件获取数据和更新数据

封装一个父组件用来包裹其他子组件

stores/index.js 文件中首先需要调用 createContext

export const MyContext = React.createContext({list: [], data: null, time: Date.now()}); 

createContext 中的参数是默认值，只有当组件所处的树中没有匹配到 Provider 时，其参数才会生效。

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中匹配离自身最近的Provider，并从中读取到当前的 context 值。

context 可以设置一个displayName 的属性， 可以方便在React DevTool 对该c