在React应用中,如何在多个组件间共享数据并非一件简单的事情,在之前,我们可能需要去学习redux或是mobx,理解什么是reducer 什么是observable 。
于是乎,经过了九个月的探索(期间绕过很多弯路),笔者终于找到了React全局状态管理的正道!这也就是下面将要介绍的新鲜出炉的轮子:reto(reto的意思就是React Store)。
reto的设计初衷很简单直接,让一切变得自然而简单:
使用hooks创建store,就像是在写一个普通的组件。
下面不妨举一个简单的例子 :
定义Store
每一个Store
其实就是一个类似于custom hook的函数。在Store
的函数体中,你可以随意使用react hooks,例如useState
、useEffect
、useRef
。
export function FooStore() {
const [x, setX] = useState(initial)
return {
x,
setX
}
}
提供Store
通过Provider
组件提供一个FooStore
,Provider
组件会维护一个Store的实例。
<Provider of={FooStore}>
<App/>
</Provider>
获取Store
在组件中通过useStore
获取并订阅FooStore
的更新。
const App = (props) => {
const fooStore = useStore(FooStore)
function changeStore() {
fooStore.setX(fooStore.x + 1)
}
return (
<div>
<button onClick={changeStore}>Change</button>
{fooStore.x}
</div>
)
}
当点击按钮时,会调用fooStore
中的setX
函数,从而触发x
的更新以及App
组件的重渲染,一切都非常简单而自然。
人们常常说,鱼和熊掌不可得兼,但是,reto比起redux,真的是既简单,又灵活,而且性能上由于组件树的拆分可以更快更轻。笔者目前在阿里写前端,在造完这个轮子之后,目前我们小组已经完全迁移到了reto,稳定性已经是经过线上应用的考验了。
当然上面所述的只是一个简单到不能再简单的例子,更多的进阶用法可以点此查看。
最后。。挂上项目链接,欢迎PR/issue/star!
Flexible and efficient React store with hooks.awmleer.github.io awmleer/retogithub.com