Recoil学习笔记

Recoil 是一个由 Facebook 开发的 React 状态管理库，它提供了一种简单而强大的方式来管理 React 应用中的状态。

一、什么是Recoil？

Recoil 是一个基于 React 的状态管理库，旨在简化和统一 React 应用中的状态管理。与其他状态管理库相比，Recoil 提供了更简单、更直观的 API，并且与 React 的生态系统紧密集成，使用React内部的调度机制，支持并发模式。

React定义了一个正交有向图，并附加在React树中，状态的变化从该图的根（atom）开始，通过纯函数（selector）的方式传入组件。具体方式如下：

        Recoil创建了无模板（boilerplate-free）API，其共享状态与React内部的状态拥有相同的get/set接口（如有需要，可以使用reducer等）

        Recoil有与并发模式（Concurrent Mode）及其他React新特性兼容的可能

        状态的定义是增量及分布式的，从而可以进行代码拆分

        可以用派生数据替换状态，而无需修改使用它的组件

        派生数据可以在同步和异步之间切换，无需修改使用它的组件

        Recoil可以将导航（navigation）视为一等公民（first-class concept），甚至可以对链接中的状态进行编码

        以向后兼容的方式持久保持整个应用程序的状态很容易，因此，持久化保存的状态可以在应用程序更改之后继续存在

核心概念

        Recoil能创建一个数据流图（data-flow graph），从atom（共享状态）到selector（纯函数），再向下流向React组件。Atom是组件可以订阅的状态单位。selector可以异步或同步转换状态

二、Recoil的特性

原子状态

        Recoil 提供了一种称为原子状态（Atom）的概念，它类似于 React 的状态（state），但可以在应用中任何组件之间共享和访问。

选择器

        除了原子状态之外，Recoil 还引入了选择器（Selector）的概念，它允许我们根据原子状态派生新的状态，类似于 Redux 中的派生状态。

异步支持

        Recoil 提供了对异步状态的原生支持，使得处理异步数据变得更加简单和直观。

三、使用Recoil

1、安装Recoil

npm install recoil

Atom:

         一个 atom 代表一个状态。Atom 可在任意组件中进行读写。读取 atom 值的组件隐式订阅了该 atom，因此任何 atom 的更新都将致使使用对应 atom 的组件重新渲染

        在需要使用的组件中，你应该引入并使用 useRecoilState()

Selector:

        selector 代表一个派生状态，派生状态是状态的转换。你可以将派生状态视为将状态传递给以某种方式修改给定状态的纯函数的输出

        可以使用 useRecoilValue() 的 hook，来读取 charCountState 的值

2、定义状态

import { atom, selector } from 'recoil';
 
//定义原子状态
export const todoListState = atom({
  key: 'todoListState',
  default: [],
});
 
//定义选择器
export const todoListStatsState = selector({
  key: 'todoListStatsState',
  get: ({ get }) => {
    const todoList = get(todoListState);
    const totalNum = todoList.length;
    const completedNum = todoList.filter(item => item.completed).length;
    const incompleteNum = totalNum - completedNum;
    return {
      totalNum,
      completedNum,
      incompleteNum,
    };
  },
});
 

3、使用状态

import React from 'react';
import { useRecoilState } from 'recoil';
import { todoListState } from './atoms';
 
function TodoList() {
  const [todoList, setTodoList] = useRecoilState(todoListState);
 
  const addItem = () => {
    // 添加新的待办事项到 todoList
  };
 
  return (
    <div>
      <ul>
        {todoList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}
 
export default TodoList;
 

对比Redux、Mobx

• Redux是集中式管理state，而Recoil和Mobx都是分散式。
• Recoil中状态的读写都是Hooks函数，目前没有提供类组件的使用方式。
• Recoil是Facebook开发的，可以使用React内部的调度机制，这是Redux和Mobx不支持的。