recoiljs 快速入手后总结

recoiljs 是什么

fb 针对 react 新出的状态管理框架， 大概瞄了一下，按照官网的说法，是小、更加Reactish，最重要的是 不破坏 code-splitting，为什么不用 provider 呢，粗粒问题， 这些细节还没深入去看，现在先简单说下怎么入手。

Atoms 和 Selectors

Atoms 跟名字一样，就是原子化，提供一个state，如下，设置唯一的 key 和 默认值，

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

当我们在 app 里面使用的时候，从官网的 todo list 项目来看，有三种使用方式

1. 单纯去使用它的值 const todoList = useRecoilValue(todoListState); , 如下

{todoList.map((todoItem) => (
        <TodoItem item={todoItem} />
      ))}

2. 单纯想去更新值 const setTodoList = useSetRecoilState(todoListState);, 如下

const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,
      },
    ]);
  };

3. 想同时获取值和可以更新值 const [todoList, setTodoList] = useRecoilState(todoListState);，类似 react useState ，其中 todolist 是state 值，这个没什么好说，setTodoList 也是直接把值设置进去，注意跟上面useSetRecoilState 产出的 setTodoList 的区别，

Selectors

A selector represents a piece of derived state

上面是官网的解释，可以认为是衍生的 state ，有点像 reducer，支持从 state 和 其他 selector 获取值。 在官网 todo list 项目中，可以看到同样有 key ，值是由 get 这个函数返回的，其中 get 函数里面的 通过 get方法 去获取其他 state 或者 selector 的值，下面的代码就是获取全部列表的值和筛选条件的值去返回符合筛选条件的列表

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All',
});

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

同时 selector 也支持 set 操作，类似官网对华氏度和摄氏度的转化, 当我们对摄氏度的 selector 进行赋值的时候，也会更新华氏度 tempFahrenheit 的值，

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});

按照官网 demo 跑了一遍之后，基本总结是这些，晚点有时间深入去研究了，会再写一篇深入