React状态管理 | 青训营笔记

61 阅读3分钟

1.React Query

  • react-query是一个适用于react hooks的请求库,它可以为任何类型的异步数据提供React状态管理功能,使React中的获取、缓存、同步和更新服务器数据变得轻而易举。
  • react-query与一些传统的状态管理库如redux,mobx不同,它是负责管理服务器与客户端之间的状态,一些用户交互的中间状态,如loading状态,错误信息等都是通过hooks直接返回。

初步使用:

  1. yarn add react-query or npm i react-query 安装react-query
  2. 使用QueryClientProvider组件连接并提供一个QueryClient到你的应用程序

Devtools

  • yarn add react-query-devtools or npm i --save react-query-devtools安装Devtools
  • react-query-devtools是与react-query相匹配的开发工具
  • 可在开发中实时查看缓存,手动获取和删除查询等等

增删查改

react-query最常用的两个hook,查询(useQuery)、增删改(useMutation)

useQuery

  • useQuery:在React Query中,查询是对某些异步数据源的声明性依赖。查询可以与任何基于Promise的方法(GET)一起使用,从服务器获取数据

useMutation

  • useMutation:常用于创建/更新/删除数据或执行服务器副作用

2.Redux

一般来说,项目交互不多就不需要用到Redux;

Redux由store、reducer、action组成;

store就是保存数据的地方,一个页面只能有一个store,它是通过createStore(fn)函数来生成的,fn是一个reducer函数;

reducer就是在收到Action后通过type判断返回一个新的state的计算过程;

action就是用户操作页面告知何时应该改变state的一个通知;

redux工作流程:首先用户操作页面时会发出一个action,action自动调用reducer,reducer通过action中的type判断更新哪一个state,再把action中更改后的值给state;state一变页面就会重新渲染;

3.Mobx

相比于redux来说,mobx的学习成本更低,也更加简单,一个store文件就可以了;

state:组件中的数据;

observable:被观察者,被observable修饰的state会暴露给整个app,各观察者组件都可以根据state值的变化作出响应

observer:观察者,被observer修饰的组件中将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染(原理:用autorun包裹了render函数,state变化触发autorun从而自动渲染)

action:state值的修改需要在action函数中进行

4.Recoil

使用 Recoil,我们需要在项目最外层包一个 RecoilRoot ,这个和大部分状态管理器一致,通过 context 来跨组件传递数据。

Recoil核心概念只要是atoms和selectors

atoms就是用来定义我们需要用到的状态,有key和default等属性,key是全局唯一的也是必须的,default为你定义这个状态的默认值;

selectors:有些状态需要依赖其它状态,这时候就要用 selector 来定义这个状态了

小结

从这节课中对于react的各组件有了较为全面的认知,这对于后续继续学习react有非常大的帮助。虽然第一次听相关知识有很多地方存在不理解的问题,但是这次的学习却为我们后续的进一步自主学习亦或是听课学习提供了一种“思维方式”,就是在遇到react相关问题时,知道了要如何去搜索相关知识讲解与问题答案,我认为这一点对于前端小白来说是更为珍贵的技能。