React状态管理库-Recoil

·  阅读 3986

前言

Recoil是FaceBook公司提出的状态管理方案,相当于和React是师出同门,虽然我目前在工作当中用的是Mobx,并且使用起来也是十分的爽,但是Recoil非常有必要去了解一下,所以在学习之后写一篇文章记录一下!

我们都知道React强调的是immuteable,而Recoil强调的同样也是immuteable,而mobx则是mutable,而immuteable给带来的好处就是增强组件整体的应用性能,相对来说,确定可变对象是否变更是复杂的,因为如果对一个可变的对象,我们需要判断它是否改变,这就需要当前对象与先前副本进行比较,我们需要遍历整颗对象树,并且比较每个变量和值,这个过程将会变得很复杂,而确定不可变对象是否改变是非常容易的,我们只需要判断对象的引用是否相同,如果引用改变了那就改变了,经此而已。对React来说,因为使用的是不可变数据,那么对UI渲染来说,判断组件是否重新渲染则来的更容易些。

关于Recoil

Recoil采用分散管理原子状态的设计模式

Recoil提出了一个新的管理状态单位Atom,它是可更新和订阅的,当一个Atom更新之后,每个订阅它的组件都会与之更新重新渲染,如果多个组件使用同一个Atom,那么这些组件将会共享他们的状态。

因为 React 本身提供的 state 状态在跨组件状态相对来时是比较困难,当然我们可以用context,所以我们在开发时一般借助一些其他的库如 Redux、Mobx 来帮助我们管理状态。这些库目前正被广泛使用,我们也并没有遇到什么大问题,那么 Facebook 为什么还要推出一款新的状态管理框架呢?

使用 Redux、Mobx 当然可以,并没有什么问题,主要原因是它们本身并不是 React 库,我们是借助这些库的能力来实现状态管理。像 Redux 它本身虽然提供了强大的状态管理能力,但是使用的成本非常高,你还需要编写大量冗长的代码,另外像异步处理或缓存计算也不是这些库本身的能力,甚至需要借助其他的外部库。

并且,它们并不能访问 React 内部的调度程序,而 Recoil 在后台使用 React 本身的状态,在未来还能提供并发模式这样的能力。

Recoil基础

初始化

使用Recoil的组件需要使用RecoilRoot组件包裹起来

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
  useSetRecoilState
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}
复制代码

定义状态

上面我们已经提到了 Atom 的概念, Atom 是一种新的状态,但是和传统的 state 不同,它可以被任何组件订阅,当一个 Atom 被更新时,每个被订阅的组件都会用新的值来重新渲染。

export const nameState = atom({
  key: 'nameState',
  default: '栗鼠怪'
});
复制代码

其中 key 必须在 RecoilRoot 作用域内唯一,也可以认为是 state 树打平时 key 必须唯一的要求。 default 定义默认值,既然数据定义分散了,默认值定义也是分散的。

订阅和更新状态

  • useRecoilState:类似 useState 的一个 Hook,可以取到 atom 的值以及 setter 函数
  • useSetRecoilState:只获取 setter 函数,如果只使用了这个函数,状态变化不会导致组件重新渲染
  • useRecoilValue:只获取状态
import { nameState } from './store'
// useRecoilState
const NameInput = () => {
  const [name, setName] = useRecoilState(nameState);
  const onChange = (event) => {
   setName(event.target.value);
  };
  return <>
   <input type="text" value={name} onChange={onChange} />
   <div>Name: {name}</div>
  </>;
}

// useRecoilValue
const SomeOtherComponentWithName = () => {
  const name = useRecoilValue(nameState);
  return <div>{name}</div>;
}

// useSetRecoilState  
const SomeOtherComponentThatSetsName = () => {
  const setName = useSetRecoilState(nameState);
  return <button onClick={() => setName('Jon Doe')}>Set Name</button>;
}

复制代码

从上面我们可以看到我们取值和改变值是使用hook的形式,对于习惯react函数组件来说是非常友好的

派生状态

selector 表示一段派生状态,它使我们能够建立依赖于其他 atom 的状态。它有一个强制性的 get 函数,其作用与 redux 的 reselect, MobX 的 @computed, vue中的computed相似

const lengthState = selector({
  key: 'lengthState', 
  get: ({get}) => {
    const text = get(nameState);
    return text.length;
  },
});

function NameLength() {
  const length = useRecoilValue(charLengthState);
  return <>Name Length: {length}</>;
}
复制代码

异步状态

Recoil 提供了通过数据流图将状态和派生状态映射到 React 组件的方法。真正强大的功能是图中的函数也可以是异步的。这使得我们可以在异步 React 组件渲染函数中轻松使用异步函数。使用 Recoil ,你可以在选择器的数据流图中无缝地混合同步和异步功能。只需从选择器 get 回调中返回 Promise ,而不是返回值本身。

例如下面的例子,如果用户名存储在我们需要查询的某个数据库中,那么我们要做的就是返回一个 Promise 或使用一个 async 函数。如果 userID 发生更改,就会自动重新执行新查询。结果会被缓存,所以查询将仅对每个唯一输入执行一次(所以一定要保证 selector 纯函数的特性,否则缓存的结果将会和最新的值不一致)

const userNameQuery = selector({
  key: 'userName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(userNameQuery);
  return <div>{userName}</div>;
}
复制代码

总结

无论我们使不使用recoil,我们当可以从Recoil学到关于React状态管理的基本功,它的设计模式是分散式管理,这里有点像mobx,但是在使用方式上完全拥抱react函数式中Hook的使用,关于派生状态我们可以使用recoilselector,也可以使用useMemo。毕竟是 Facebook 官方推出的状态管理框架,其主打的是高性能以及可以利用 React 内部的调度机制,包括其承诺即将会支持的并发模式,这一点还是非常值得期待的。最近笔者也有去了解RTK,即redux-toolkit,下篇文章应该会去记录和学习它的使用!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改