React新一代状态管理库Recoil

由于前段时间在领导的“威逼利诱”下，了解和学习了下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 (
            
                
            
        );
     }

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 <>
     
     
Name: {name}
    ;
}

// useRecoilValue
const SomeOtherComponentWithName = () => {
    const name = useRecoilValue(nameState);
    return 
{name}
;
}

// useSetRecoilState  
const SomeOtherComponentThatSetsName = () => {
    const setName = useSetRecoilState(nameState);
    return  setName('Jon Doe')}>Set Name;
}

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 
{userName}
;
}

function MyApp() {
  return (
    
      
        Loading...

}> ); }

其中，异步状态可以被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，但是它带给我们的绝不只是上述的用法，在状态管理上，我们或许可以思考新的出发点：

• 读与写分离，做到最优按需渲染
• 派生的值必须严格缓存，并在命中缓存时引用保证严格相等
• 原子存储的数据相互无关联，所有关联的数据都使用派生值方式推导