在这个指南中我们将要学习Recoil.js,一个高效的状态管理和更好的组件渲染周期的React新库。
这篇文章是从官方文档提炼出来的,如果想了解全部文档内容请参考官方文档。
Recoil是啥?
使用Recoil,你可以创建一个数据流图,该图从Atom(共享状态)Selector(纯函数)一直流到React组件。Atom是组件可以订阅的状态单位。Selectors 使用同步或者异步的方式转换状态。
Recoil.js 由ATOMS 和 SELECTOR 组成
- Atoms Atoms是状态的单位,可更新、可订阅。当atom更新了,每一个订阅他的组件都会使用新的值进行重新渲染。atom也可以在运行时创建。可以使用Atoms代替React本地组件状态。如果从多个组件中使用同一个Atom,那么所有这些组件共享它们的状态。
![68bfb22fb6423628b29db8b3ade9ee60.png](https://i-blog.csdnimg.cn/blog_migrate/3250fe1cb259bb7fd8f50e9708483c63.jpeg)
现在,上面的atom(一段状态代码)可以被多个组件使用,就像普通的useState变量一样,也可以改变这个全局状态。
使用Atoms: 在多个组件中使用相同的Atom,改变Atom状态所有的组件都会响应。