React中的另一种状态管理方案Valtio

React中的状态管理是开发人员需要解决的问题。 总有一些新库给你选择,而选择合适的库可能是一项困难的工作
状态管理一直是React中开发人员需要解决的问题,如何有条理的组织数据,如何快速的在项目中集成,这些都是我们做项目时选择技术的标准。
Redux一直是我们react项目中不二的状态管理插件,但是redux的配置以及各种插件的安装一直是很多人员头疼的一个问题,太麻烦了。但是随着的出现,确实解决了这个问题,直接安装,就不再需要继续安装各类其他插件,直接上手就能用,简单方便。但是很多时候,我们的项目可能根本不需要这么笨重的插件,虽然redux很好,但是毕竟这么多年过去了,一代新人换旧人。前端这个大坑中,总会出现新的技术、框架来埋葬那些老家伙。
Proxy
自ES6版本以来,我们在JavaScript中有。 接收两个参数:
target
- 要代理的原始对象handler
- 定义对象的操作
这是我们如何使用JavaScript创建的方式:
我们需要做的是包装我们的状态对象,然后我们可以在我们的应用程序中的任何地方进行改变:
定义好的数据直接在组件中进行引入就能使用,useSnapshot可以获取我们定义好的状态数据,使用之后在组件中就是一个响应式的效果,只要数据改变了组件就会直接进行更新
valtio简单直接,充分使用了proxy这个对象,简单粗暴的实现react项目的状态管理。在一些小型项目中是一个不错的选择。当然当然大家还是需要在项目中努力做好自己代码结构的组织方便后去数据的维护。
store/features,目录可以根据功能做拆分处理。每一个功能对应一个文件
比如此处我的movie.ts文件的内容如下
完成的store/index.ts文件如下
而我组件中如果要获取数据,可以直接拿来用