欢迎光临散文网 会员登陆 & 注册

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

2023-02-27 09:47 作者:千锋前端  | 我要投稿

小甜甜虽好,但谁不爱紫霞仙子呢?Redux虽好,但还有Valtio!

React中的状态管理是开发人员需要解决的问题。 总有一些新库给你选择,而选择合适的库可能是一项困难的工作

状态管理一直是React中开发人员需要解决的问题,如何有条理的组织数据,如何快速的在项目中集成,这些都是我们做项目时选择技术的标准。

Redux一直是我们react项目中不二的状态管理插件,但是redux的配置以及各种插件的安装一直是很多人员头疼的一个问题,太麻烦了。但是随着ReduxToolkit的出现,确实解决了这个问题,直接安装,就不再需要继续安装各类其他插件,直接上手就能用,简单方便。但是很多时候,我们的项目可能根本不需要这么笨重的插件,虽然redux很好,但是毕竟这么多年过去了,一代新人换旧人。前端这个大坑中,总会出现新的技术、框架来埋葬那些老家伙。

代理

Proxy对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。

自ES6版本以来,我们在JavaScript中有代理。  代理接收两个参数:

  • target - 要代理的原始对象

  • handler - 定义对象的操作

这是我们如何使用JavaScript创建代理的方式:

Valtio

Valtio是一个用于对React和JavaScript应用程序简单的代理状态的库。它使用了js中Proxy这个语法,能让我们可以非常方便的在react中集成状态管理功能。

我们需要做的是包装我们的状态对象,然后我们可以在我们的应用程序中的任何地方进行改变:

定义好的数据直接在组件中进行引入就能使用,useSnapshot可以获取我们定义好的状态数据,使用之后在组件中就是一个响应式的效果,只要数据改变了组件就会直接进行更新


valtio简单直接,充分使用了proxy这个对象,简单粗暴的实现react项目的状态管理。在一些小型项目中是一个不错的选择。当然当然大家还是需要在项目中努力做好自己代码结构的组织方便后去数据的维护。


store,目录存储valtio的数据。index.ts做为入口,可以引入其他的子节点数据

store/features,目录可以根据功能做拆分处理。每一个功能对应一个文件

比如此处我的movie.ts文件的内容如下

完成的store/index.ts文件如下


而我组件中如果要获取数据,可以直接拿来用



React中的另一种状态管理方案Valtio的评论 (共 条)

分享到微博请遵守国家法律