由于前段时间在领导的“威逼利诱”下，了解和学习了下Recoil，刚开始是比较抗拒的，不过后来慢慢的了解了之后，发现还是很不错的，所以做一个学习的笔记和分享。
Recoil最重要的因为它是基于Immutable的数据流管理方案，带来的可预测性非常利于调试和维护：
1.断点调试时可预测，已创建过的值不会突变，与断点位置也无关
2.在React框架下组件更新机制单一只有引用变化才触发重新渲染，没有forceUpdate的困扰
上手使用
1.初始化：使用Recoil的状态的组件需要用RecoilRoot包裹
import React from 'react';
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
useSetRecoilState
} from 'recoil';
function App() {
return (
<RecoilRoot>
<CharacterCounter />
</RecoilRoot>
);
}
2.定义状态：不需要集中定义，可以像Mobx分散在各个地方
export const nameState = atom({
key: 'nameState',
default: 'test'
});
其中key在recoliRoot中是唯一的，并且提供一个默认值，默认值可以是静态值、函数、异步函数等
3.订阅和更新状态：三个常用API
1). useRecoilState：类似useState的一个Hook，能够取到Atom的值以及setter函数
2). useSetRecoilState：只获取setter函数，如果只是使用了这个函数，状态更新并不会引起组件重新渲染
3). 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>;
}
4.派生状态：与Mobx的computed类似，selector表示一段派生状态，提供了get、set、分别定义如何赋值，如何取值，同时其与atom定义的一样可以使用上述三种API。
const lengthState = selector({
key: 'lengthState',
get: ({get}) => {
const text = get(nameState);
return text.length;
},
});
function NameLength() {
const length = useRecoilValue(lengthState);
return <>Name Length: {length}</>;
}
5.异步状态：基于selector可以实现异步数据读取，即修改get函数为异步函数
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>;
}
function MyApp() {
return (
<RecoilRoot>
<ErrorBoundary>
<React.Suspense fallback={<div>Loading...</div>}>
<CurrentUserInfo />
</React.Suspense>
</ErrorBoundary>
</RecoilRoot>
);
}
其中，异步状态可以被Suspense捕获，异步过程报错可以被ErrorBoundary捕获。
如果不想用Suspense异步阻塞，可以使用useRecoilValueLoadable在当前组件内管理异步状态
不足
- Immutable压力：API繁多，而且Immutable模式中，对于数据流只有读和写两种诉求，但是我们期待读的含义是，UI能够在订阅其变化后自然而然Rerender。
Recoil提供了useRecoilState作为读写双重API，useRecoilValue只是简化了API，但是useSetRecoilValue在仅写不读的场景下，是不会随着状态变更重新渲染组件的。
对比useState，他是单组件状态管理的场景，但Recoil是全局状态解决方案，读写分离的场景下，对于只写的组件很有必要脱离对数据的订阅实现性能最大化。 - 条件访问数据：因为Hooks的通病，无法写在条件语句中，所以要利用 Hooks 获取一个带有条件判断的数据时，必须回到 selector 模式。
从useRecoilState以及selector来看，相当于Recoil对useContext和useMemo的封装。
收获
尽管短时间内我们不会在项目上Recoil，但是它带给我们的绝不只是上述的用法，在状态管理上，我们或许可以思考新的出发点：
- 读与写分离，做到最优按需渲染
- 派生的值必须严格缓存，并在命中缓存时引用保证严格相等
- 原子存储的数据相互无关联，所有关联的数据都使用派生值方式推导
