当前位置: 首页 > Web前端 > JavaScript

轻量级高性能React状态管理库Jotai

时间:2023-03-26 21:14:00 JavaScript

什么是乔泰?React原始而灵活的状态管理引用官方的话,Jotai是一个原始而灵活的React状态管理库。原文:API以Hooks的形式提供,使用方法类似useState。UseReducer很灵活:可以组合多个Atom来创建新的Atom。Atom,并且同时支持异步,我觉得Jotai可以称得上是一个小巧、简洁、高性能的状态管理库Jotai可以看成是Recoil的简化版,使用Atom+Hook+Context来解决React全局数据的问题流量管理的问题。Atom是Jotai中的状态管理单元。它可以更新和订阅。更新Atom时,订阅此Atom的组件将使用新值重新呈现,更新相应的Atom只会重新呈现订阅。有这个Atom的组件不会像Context一样导致整个父组件重新渲染,所以可以准确渲染。Jotai和Recoil有什么区别?Jotai和Recoil的概念非常相似。它们都采用了原子状态去中心化管理的设计模式,所以在用法上是相似的。但相比较而言,它们具有以下优点。Jotai的API比Recoil简单多了,也很容易上手。Jotai不需要使用RecoilRoot或Provider等Component封装,结构更简洁Jotai定义Atom时不需要提供keyJotai更小,只有2.4kBJotai更好地支持TypeScript如何使用Jotai?安装Jotainpminstalljotai定义Atom一个Atom代表一个状态使用atom函数创建一个Atom,需要传入一个参数指定初始值,值可以是字符串、数字、对象、数组等import{原子}来自“jotai”;constvalueAtom=atom(0);使用AtomuseAtom函数接受一个参数,参数值是一个Atom返回值是一个array数组,第一个值是Atom中存储的值,第二个值是更新Atom值的函数import{useAtom}来自“乔泰”;const组件=()=>{//类似React.useState的用法//const[value,setValue]=useState(defaultValue);const[value,setValue]=useAtom(valueAtom);}完整代码下面的代码已经写在CodeSandbox中,你可以点击下面的链接,在线运行代码在线运行代码import{atom,useAtom}from"jotai";//定义一个Atom,并赋予默认值0constvalueAtom=atom(0);//显示区域constText=()=>{//使用这个Atom//类似于React.useState//const[value,setValue]=useState(默认值);const[值]=useAtom(valueAtom);return

{value}
;};//按钮区域constButton=()=>{//这里不用第一个值,只要更新第二个值即可functionconst[,setValue]=使用原子(值原子);//使用setValue函数你可以更新valueAtom的值constadd=()=>{setValue((prev)=>prev+1);};constdec=()=>{setValue((prev)=>prev-1);};constreset=()=>{setValue(0);};返回(
+-重置
);};exportdefault()=>{return(
);};Summary如果你想要一个轻量级的、易于使用的状态管理库性能不错,那就试试JotaiRecoil,新一代React状态管理库