状态管理器

本文介绍使用Recoil来实现状态管理

安装Recoil

使用下面的命令安装

yarn add recoil

创建一个状态

export const helloTextStore = atom({
  key: 'helloText',
  default: 'Hello World!',
});

获取状态

export const helloTextStore = atom({
  key: 'helloText',
  default: 'Hello World!',
});

export function App(){
  const helloText = useRecoilValue(helloTextStore);

  return <>
    { helloText }
  </>
}

修改状态

export const helloTextStore = atom({
  key: 'helloText',
  default: 'Hello World!',
});

export function App(){
  const [helloText, setHelloText] = useRecoilState(helloTextStore);

  function change(){
    setHelloText("Hello React!");
  }

  return <>
    { helloText }
    <button onClick={ () => change() }>修改状态</button>
  </>
}

在Hooks使用

这是错误的使用方法：


function add(){
  const [num, setNum] = useRecoilState(num);
  setNum(num+1);
}

export function App(){
  return <>
    <button onClick={()=>add()}></button>
  </>
}

正确用法：


const useAdd=()=>{
  const [num, setNum] = useRecoilState(num);
  const add(){
    setNum(num+1);
  }
  return add;
}

export function App(){
  const add=useAdd();
  return <>
    <button onClick={()=>add()}></button>
  </>
}

如果存在多个方法：

const useNum=()=>{
  const [num, setNum] = useRecoilState(num);
  const add(){
    setNum(num+1);
  }
  const minus(){
    setNum(num-1);
  }
  return {add, minus};
}

export function App(){
  const num=useNum();
  return <>
    <button onClick={()=>num.minus()}></button>
    <button onClick={()=>num.add()}></button>
  </>
}

自定义Hook