recoil

使用

安装

yarn add recoil

定义state:

import { atom } from 'recoil';
const textState = atom({
 key: 'textState', 
 default: '', 
});

export { textState };

定义selectors:

import { textState } from './atom';
import { selector } from 'recoil';
const charCountState = selector({
 key: 'charCountState',
 get: ({ get }) => {
   const text = get(textState);

   return text.length;
 },
});
export { charCountState };

组件中使用state以及selecotor计算数据：

import { useRecoilState, useRecoilValue } from 'recoil';
import { textState } from './atom';
import { charCountState } from './selector';
function CharacterCounter() {
 return (
   <div>
     <TextInput />
     <CharacterCount />
   </div>
 );
}

function CharacterCount() {
 const count = useRecoilValue(charCountState);

 return <>Character Count: {count}</>;
}

function TextInput() {
 const [text, setText] = useRecoilState(textState);

 const onChange = (event) => {
   setText(event.target.value);
 };

 return (
   <div>
     <input type="text" value={text} onChange={onChange} />
     <br />
     Echo: {text}
   </div>
 );
}

export default CharacterCounter;

最后要在根组件中使用RecoilRoot包裹：

import React from 'react';
import CharacterCounter from './recoil/CharacterCounter';
import { RecoilRoot } from 'recoil';

function App() {
 return (
   <RecoilRoot>
     <CharacterCounter />
   </RecoilRoot>
 );
}

export default App;

recoil可以利用selector的get发送异步请求：

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

与redux的区别和联系：

• 1,都使用一个提供状态的跟组件，redux不需要提供对应根组件的包裹组件ß,recoil使用RecoilRoot包裹对应的父组件，

• 2，定义状态，redux定义普通状态，并传递给reducer处理，recoil使用atom来定义状态。

• 3，管理状态，redux通过store对象的getState以及dispatch来获取以及修改对象，recoil使用useRecoilState来获取来获取状态变量以及修改状态的方法

• 4,状态订阅：redux状态修改的时候，若想要其他依赖此状态的组件都更新，其他组件都需要对store进行订阅，即需要store.subscrib()处理，但是recoil不需要，recoil状态改变的时候会自动通知依赖组件进行更新。

• 5，recoil中有一个根据状态而得到过渡态的数据，这个数据会随着状态改变自动更新，而redux想要在状态改变的时候得到一个计算后的数据，需要重新渲染计算。

与react-redux区别和联系：

• 都使用一个提供状态的跟组件，react-redux使用Provider,recoil使用RecoilRoot，

• 定义状态，react-redux定义普通状态，并传递给reducer处理，recoil使用atom来定义状态。

• 管理状态，reduxt通过connect可以是组件获取对应的状态和修改状态的dispatch方法，，recoil使用useRecoilState来获取来获取状态变量以及修改状态的方法

• 状态订阅；react-redux和recoil都不需要组件专门订阅状态，当状态改变的时候，会自动更新依赖组件。

• react-redux没有对应的状态过渡态的数据。

recoil优点：

• 1，不用定义复杂的reducers,actions等，

• 2，可以直接通过useRecoilState很方便的获取状态以及修改状态。

• 3，可以定义状态的依赖态数据。