Recoil在React中的完整实践计划

收录于:39天前

我先抱怨一下吧。 Recoil的文档确实不友好。另外我发现国内用Recoil的人很少，很多文章都是抄袭官网文档。如果有问题，直接去官方网站查看即可。如果您碰巧看到这篇文章，请仔细阅读，这绝对是有用的信息。至于它的一些优点和特点，大家可以自己去找其他的对比文章。这里我只通过一个简单的例子来演示和学习。

第 1 步：创建项目

使用维特创造反应项目，其他都一样，别问我为什么只讲维特，因为这就是我用的维特。

pnpm create vite

……选择react项目至于是ts还是js看你自己的喜好……

npm install

npm run dev

这是我的项目目录：

第二步：畏缩安装

pnpm add recoil

项目使用

插入 main.tsx<RecoilRoot/>,请注意，此标签必须是 UI 的根。

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
import "antd/dist/reset.css";
import "animate.css";
import "@/assets/styles/index.scss";

// react 18 创建（会导致 antd 菜单折叠时闪烁，等待官方修复）
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // * react严格模式
  // <React.StrictMode>
  <BrowserRouter>
   <RecoilRoot>
    <App></App>
   </RecoilRoot>
  </BrowserRouter>,
  // </React.StrictMode>,
);

为了方便使用，我根据流行的标准创建了一个目录，并做了一些简单的封装。好不好用就看你自己了；如果不好，你可以自己改变。

// 示例封装
import { atom, selector } from "recoil";
import ThemeConfig from "@/config/themeConfig";
import { ITheme } from "@/interface/theme";

const theme: ITheme = {
  title: import.meta.env.VITE_TITLE,
  theme: "default",
  i18n: ThemeConfig.i18nDef,
};

export const themeState = atom({
  key: "themeState",
  default: theme,
});

export default {
  i18nState: atom({
   key: "i18nState",
   default: ThemeConfig.i18nDef,
  }),
  useThemeState: selector({
   key: "useThemeState",
   get: ({ get }) => {
    return get(themeState);
   },
   set: ({ get, set }, newValue) => {
    const oldValue = get(themeState);
    const updateValue = Object.assign({}, oldValue, newValue);
    set(themeState, updateValue);
   },
  }),
};

// index.ts入口
import Theme from "./modules/theme";

export default {
  …Theme,
};

使用示例

import { useEffect } from "react";
import { Row, Col, Pagination, Switch } from "antd";
import { atom, useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
import Store from "@/store";
import "@/assets/styles/page/home.scss";

export default function Home() {
  const [i18nState, setI18nState] = useRecoilState(Store.i18nState);
  const setThemeState = useSetRecoilState(Store.useThemeState);
  const themeState = useRecoilValue(Store.useThemeState);
  useEffect(() => {
   setI18nState("en-us");
   console.log(i18nState);
  }, []);

  const onChange = (checked: boolean) => {
   console.log(`switch to ${checked}`);
   setThemeState({ i18n: "en-us" });
   if (checked) {
    setThemeState({ i18n: "zh-cn" });
   } else {
    setThemeState({ i18n: "en-us" });
   }
   console.log(themeState);
  };

  return (
   <Row justify="center" className="content-body home-box">
    <Col span={24}>
     <Pagination total={85} showSizeChanger showQuickJumper showTotal={(total) => `Total ${total} items`}></Pagination>
     <Switch defaultChecked onChange={onChange} />
    </Col>
   </Row>
  );
}

重点！！！：根据它的特点，简单介绍一下如何正确理解和使用它的一些属性和钩子。仅限于常用的。如果不常用的话可以自己研究或者私信我。

原子（选项）

包含我们应用程序中的状态源。最细的粒子直接定义了我们使用的状态，因为后续的选择器也是基于此进行操作的。

export const demoState = atom({
  key: 'demoState',
  default: ”demo”,
});
export const atomState = atom({
  key: 'atomState',
  default: {i18n: “en”},
});

选择器（选项）

代表一个派生状态，您可以将派生状态视为将状态传递给以某种方式修改给定状态的纯函数的输出。说白了，这是为了处理复杂的状态，或者说处理你需要的状态。

export const useAtomState = selector({
  key: 'useAtomState',
  get: ({ get }) => {return get(atomState)},
  set: ({ get, set }, newValue) => {set(atomState, newValue)},
});

useRecoilState(状态)

可以使用这个hook来进行读写操作，可以说和react中的useState一模一样。只要理解 useRecoilState 如何理解 useState 就可以了。

const [demoState, setDemoState] = useRecoilState(demoState);

useRecoilValue(状态)

这是直接读取其内部值，仅此而已。

const demoState = useRecoilValue(demoState);

useSetRecoilState(状态)

这也只是修改了值，仅此而已。

const setDemoState = useSetRecoilState(demoState);

请记住，写下您定义的任何内容。不要定义一个对象并将其写入字符串或其他奇怪的东西。这样你肯定不会报错，但是使用的时候肯定会生气。

其他的钩子你可以自己研究和玩。如果有兴趣，请直接看我写的完整项目。

项目地址

. . .