React Context

本文将给出实际使用React  Context的流程，效果类似于vue中的pinia

1、创建上下文（通常在一个单独的文件中完成）

2、创建提供者组件

import React, { createContext, useContext, useState } from 'react';

// 创建上下文
const MyContext = createContext("");

// 创建提供者组件
export const MyProvider = ({ children  }) => {
  const [myResult, setMyResult] = useState(null);//设置默认值为null

  return (
    <MyContext.Provider value={{ myResult, setMyResult }}>
  {children}
  </MyContext.Provider>
);
};

// 自定义钩子以便于使用上下文
export const useRes = () => {
  return useContext(MyContext);
};

3、包裹应用或组件 （在根组件或特定页面级别组件中完成）

    childrenRender: (children) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
    //主要是这个标签，让其他组件可以识别和使用
    <MyProvider>

        <>
          {children}
          <SettingDrawer
            disableUrlParams
            enableDarkTheme
            settings={initialState?.currentUser}
            onSettingChange={(settings) => {
              setInitialState((preInitialState) => ({
                ...preInitialState,
                settings,
              }));
            }}
          />
        </>

    </MyProvider>
      );
    },

4、在需要保存数据的组件进行操作 

1、引入第一步的自定义钩子

2、在提供数据的组件进行存储数据

import { useRes } from '@/context/MyContext'//这个是上下文的路径
const { setMyResult } = useRes(); // 获取上下文中的设置函数
setMyResult(response.data); // 存储生成的结果

3、在需要这个结果的组件进行使用

import { useRes } from "@/context/MyContext";
const { myResult } = useRes();//myResult 可直接使用
const [exData, setExData] = useState(myResult);