React 的状态管理库 —— Recoil

为什么使用 Recoil 在学一样东西之前,我们得了解它为什么会诞生,或者是它解决了什么问题。
Recoil 是由 Facebook 推出的一个全新的、实验性的 JavaScript 状态管理库,它解决了使用现有 Context API 在构建大型应用时所面临的很多问题。
使用 React 内置的状态管理能力有这样一些局限性:

  • 组件间的状态共享只能通过将 state 提升至它们的公共祖先来实现,但这样做可能导致重新渲染一颗巨大的组件树。
  • Context 只能存储单一值,无法存储多个各自拥有 Consumer 的值的集合。
  • 以上两种方式都很难将组件树的顶层(state 必须存在的地方)与叶子组件 (使用 state 的地方) 进行代码分割。
尽管像 Redux 和 MobX 这样的库能够确保应用的状态保持一致,但是对于很多应用来讲,它们所带来的开销是难以估量的。
Redux、Mobx 本身并不是 React 库,我们是借助这些库的能力来实现状态管理。像 Redux 它本身虽然提供了强大的状态管理能力,但是使用的成本非常高,你还需要编写大量冗长的代码,另外像异步处理或缓存计算也不是这些库本身的能力,甚至需要借助其他的外部库。
并且,它们并不能访问 React 内部的调度程序,而 Recoil 在后台使用 React 本身的状态,在未来还能提供并发模式这样的能力
Recoil 是什么 Facebook 的软件工程师做过这样一个演讲分享
更新 List 里面第二个节点,然后希望 Canvas 的第二个节点也跟着更新。
React 的状态管理库 —— Recoil
文章图片

最古老的方式就是通过共同父子组件通信,但父组件下面的子组件都会更新,这种情况下一般使用memo或者PureComponent
还可以使用 React 自带的 Context API,将状态从父组件传给子组件。
但这样带来的问题就是如果我们共享的状态越多就需要越多的 Provider,层层嵌套。
React 的状态管理库 —— Recoil
文章图片

那是否有一种可以精准更新节点,同时又不需要嵌套太多层级的方案呢?它就是 Recoil。通过创建正交的 tree,将每个 state 和组件对应起来,从而实现精准更新。
Recoil 将这些 state 称之为 Atom(英文翻译为原子),顾名思义,Atom 是 Recoil 里面最小的数据单元,它支持更新和订阅。
React 的状态管理库 —— Recoil
文章图片

使用 先来看看 Recoil 是怎么使用的
根组件
【React 的状态管理库 —— Recoil】使用 recoil 状态的组件需要使用 RecoilRoot 包裹起来,一般是根组件直接包裹
import React from 'react' import ReactDOM from 'react-dom' import { RecoilRoot } from 'recoil' import App from './App'ReactDOM.render( , document.getElementById('root') )

Atoms
Atom 是最小状态单元。它们可以被订阅和更新:当它更新时,所有订阅它的组件都会使用新数据重绘;它可以在运行时创建;它也可以在局部状态使用;同一个 Atom 可以被多个组件使用与共享。
相比 Redux 维护的全局 Store,Recoil 则是采用分散管理原子状态的设计模式,方便进行代码分割。
Atom 和传统的 state 不同,它可以被任何组件订阅,当一个 Atom 被更新时,每个被订阅的组件都会用新的值来重新渲染。
所以 Atom 相当于一组 state 的集合,改变一个 Atom 只会渲染特定的子组件,并不会让整个父组件重新渲染。
import { atom } from 'recoil'export const todoList = atom({ key: 'todoList', default: [], })

要创建一个 Atom ,必须要提供一个 key ,其必须在 RecoilRoot 作用域中是唯一的,并且要提供一个默认值,默认值可以是一个静态值、函数甚至可以是一个异步函数。
API
Recoil 采用 Hooks 方式订阅和更新状态,常用的 API 如下:
useRecoilState
类似 useState 的一个 Hook,可以对 atom 进行读写
import React, { useState } from 'react' import { useRecoilState } from 'recoil' import { TodoListStore } from './store'export default function OperatePanel() { const [inputValue, setInputValue] = useState('') const [todoListData, setTodoListData] = useRecoilState(TodoListStore.todoList)const addItem = () => { const newList = [...todoListData, { thing: inputValue, isComplete: false }] setTodoListData(newList) setInputValue('') }return (OperatePanel Page
setInputValue(e.target.value)} /> ) }

useSetRecoilState
只获取 setter 函数,不会返回 state 的值,如果只使用了这个函数,状态变化不会导致组件重新渲染
import React from 'react' import { useSetRecoilState } from 'recoil' import { TodoListStore } from './store' export default function SetPanel() { const setTodoListData = https://www.it610.com/article/useSetRecoilState(TodoListStore.todoList)const clearData = () => { setTodoListData([]) }return () }

useRecoilValue
只返回 state 的值,不提供修改方法
import React from 'react' import { useRecoilValue } from 'recoil' import { TodoListStore } from './store' export default function ShowPanel() { const todoListData = https://www.it610.com/article/useRecoilValue(TodoListStore.todoList) return (ShowPanel Page
recoil中获取结果展示: {todoListData.map((item, index) => { return {item.thing} })}) }

selector
selector 表示一段派生状态,它使我们能够建立依赖于其他 atom 的状态。它有一个强制性的 get 函数,其作用与 redux 的 reselect 或 MobX 的 computed 类似。
selector 是一个纯函数:对于给定的一组输入,它们应始终产生相同的结果(至少在应用程序的生命周期内)。这一点很重要,因为选择器可能会执行一次或多次,可能会重新启动并可能会被缓存。
export const completeCountSelector = selector({ key: 'completeCountSelector', get({ get }) { const completedList = get(todoList) return completedList.filter(item => item.isComplete).length }, })

selector 还支持异步函数,可以将一个 Promise 作为返回值
结语 除了 Facebook,暂时还没有看到有哪些网站已经用了 Recoil。
Recoil 的核心概念都很简单,没有 Redux 那么绕的概念,也不需要写一堆像 action、reducer 之类的模板文件,基于 Hooks 的 API 以及它的直观性。与其他一些库相比,Recoil 的 API 比大多数库更容易,让开发更加简单。
我们现在的项目使用了 Recoil,目前感受是简化版的 Context API,使用较 Redux 简单,暂时没有发现能像 Redux 生态那样方便的时间回溯功能,后续使用有待继续观察。
本文案例代码


  • 个人技术博文 Github 仓库
    觉得不错的话欢迎 star,给我一点鼓励继续写作吧~

    推荐阅读