Recoil

https://www.recoiljs.cn/

关于状态管理库

目前用的比较多的Redux和react的Context

缺点

1. Redux 概念比较多，规则比较繁琐；触发更新时，必须逐个遍历connect到store的组件，组件再作比较，拦截不必要的更新，对注重性能的项目来说就就是灾难。
2. Context 是react 内部组件， context 会使用参考标识，当 provider 的父组件进行重渲染时，可能会在 consumers 组件中触发意外的渲染，且如果当多个Provider嵌套时，那将更是无法控制。

Recoil

原文：

Recoil defines a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components

Recoil是一种的正交于React组件树的状态集，且每个状态时独立而互不影响的独立原子（即Atom）。状态通过纯函数（即selectors）自上流入React组件中。

看图，

1.png

每个Atom即state单元，他们是可更新和可订阅的

每个Selectors是一个可接受Atom和其他Selectors的纯函数，经过同步或异步计算返回派生数据，同样可被component订阅。当传入的数据发生更新时，同样输出的也会更新。

Todolist

https://unpkg.alibaba-inc.com/@alife/alimekits-recoil-demo@0.1.1-beta.1604287835821/docs/index.html

代码结构

2.png

查

TodoList.tsx

1. 通过Recoil的只读API useRecoilValue 读取 RecoilState 对象 filteredTodoListState
2. 拿到 list 之后遍历，将每个对象传给 组件 <TodoItem />

3.png

Atoms.tsx

1. 通过 selector 方法创建 RecoilState 对象，用 get 方法用于从其他Atom拿到 list 和 过滤词

4.png

1. 定义列表和过滤词的Atom

5.png

TodoItem.tsx

1. 拿到item之后，将里面的字段分别赋给checkbox，input和button

6.png

增

TodoItemCreator.tsx

1. 使用 useSetRecoilState 获取只写方法，将新对象添加到之前定义的RecoilState对象中（todoListState）

7.png

删

TodoItem.tsx

1. 调用units中定义好的remove方法，得到操作后的数据list
2. 通过 useRecoilState 方法得到读写方法
3. 通过写方法，更新list

8.png 9.png

units.ts

10.png

改

TodoItem.tsx

1. 改内容时，和 勾选时，通过拿到index，传给units定义的方法，得到新list
2. 使用useRecoilState 的写方法更新list

11.png 12.png

过滤

TodoItemFilters.tsx

1. 通过 useRecoilState 得到过滤词对象的读写方法
2. 更新过滤词 对象 （todoListFilterState）
3. 所有消费 该对象的组件都会更新 比如 TodoList.tsx

13.png

物料仓库

https://gitlab.alibaba-inc.com/alimekits-material/alimekits-recoil-demo/tree/daily/0.1.1/src/components/RocilList

API

1. <RecoilRoot /> 提供上下文，类似顶层的<Provider>, 必须是所有使用Recoil hooks 的组件的根
2. function atom({key, default}) 该函数返回一个可写的RecoilState对象，即定义最小颗粒度的原子state

const counter = atom({
  key: 'myCounter',
  default: 0,
});

3. selector 是一个纯函数的选择器，在定义时如果仅提供get函数，则选择器为只读并返回一个RecoilValueReadOnly对象。如果还提供set，则返回可写RecoilState对象。

• get 用于从其他Atom或Selectors得到值的函数，传给此函数后，可以直接返回值，也可以返回异步值，也可以返回Promise形式存在的一个Atom或Selectors

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => get(myAtom) * 100,
});

• 还可以做异步操作：（不过对于异步时，需要在最外层增加<React.Suspense>,还在实验中的功能）

get: async ({ get }) => {
  const myAtomValue = get(myAtom)
  const response = await new Promise(
    resolve(myAtomValue * 10)
  )
  return response
}

5. function useRecoilState<T>(state: RecoilState<T>): [T, SetterOrUpdater<T>];
   类似useState，提供读写方法
   const [tempF, setTempF] = useRecoilState(tempFahrenheit);
6. useRecoilValue(state) 和 useSetRecoilState(state)
   只读和只写

const namesState = atom({
  key: 'namesState',
  default: ['Ella', 'Chris', 'Paul'],
});
// 读
const names = useRecoilValue(namesState);
// 写  传入Atom的name
const setNamesState = useSetRecoilState(namesState);
setNamesState(names => [...names, 'NewName'])