react全局状态管理_如何利用 React Hooks 管理全局状态

如何利用 React Hooks 管理全局状态

本文写于 2020 年 1 月 6 日react

React 社区最火的全局状态管理库一定是 Redux，可是 Redux 自己就是为了大型管理数据而妥协设计的——这就会让一些小一点的应用一旦用上 Redux 就变得复杂无比。github

后来又有了 Mobx，它对于小型应用的状态管理确实比 Redux 简单很多。但是不得不说 Mobx+React 简直就是一个繁琐版本的 Vue。redux

另外无论是 react-redux 仍是 mobx，他们使用的时候都很是复杂。须要你去组件函数或是组件类上修修改改，我我的从审美上来讲就不是很喜欢。ide

后来用了 Angular 以后，我就开始对 SOA 产生好感，ng 的 Service 与依赖注入我都以为很是漂亮。函数

Service 是 Angular 的逻辑复用形式，而且解决了共享状态的问题，那 React 的自定义 Hook 能够达到相似的效果嘛？spa

能够，而且会比 Angular 更简洁。设计

自定义 Service

材料：useXxxx(自定义 hook), createContext, useContext。code

咱们作一个最简单的计数器吧：一个 button，一个 panel，button 用来增长，panel 用来展现。get

const App: React.FC = () => {

return (

);

};

而后咱们来定义咱们的 Service：

// services/global.service.ts

i