手把手教你写一个极简React全局状态管理器

前言

大家好这里是阳九,一个中途转行的野路子码农,热衷于研究和手写前端工具.

我的宗旨就是 万物皆可手写

新手创作不易,有问题欢迎指出和轻喷,谢谢

本文章适合有一定React开发经验,并且对redux这类写起来烦的一匹的库深恶痛绝的前端开发

Redux难用？

没错,redux确实难用, 这玩意核心源码只有区区几百行,意味着它偏向底层(但是居然有人为了这几百行代码写一整本书= =)

而如果你是一些小公司,使用redux必将会大大增加开发工作量。

我们的需求就是,来一个新手前端,只需要看三分钟文档就会用!!!

自定义store用法

import Store from './store'

const store = new Store({age:18,name:'张三'})  
function App(){const {age} = store.useState(['age'])const addAge = ()=>{store.setState({age:age+1}) }return ( <div><div>{age}</div><button onClick={addAge}>全局增加age</button></div>)
} 

利用useState实现全局状态管理

我们知道 useState返回了setState方法 那么当组件使用全局状态时,将这个setValue函数保存到数组里,再批量执行,不就实现了全局状态更新？