超小型react 全局状态管理demo，不用下载插件，方便好用，可统一管理全局状态，可读取，修改

使用场景：

提示：自己瞎琢磨有用就用，没用勿喷

react管理全局状态管理小demo，可统一管理全局参数，方便后期维护，利于代码的读取；
不用下载插件真的很方便，仅需一丢丢代码

---

这里是主体代码

提示：这里是userData-unitls.tsx

//引入必要Hook
import React, { createContext, useState, useContext, useEffect, useMemo } from 'react';
//这个是外部定义的数据类型
import { UserDataType } from "./fromDataType";
//这个是默认数据大家随意
const UserData = {
	bossName:'小桂子',
	bossSex:'未知',
	user:[
		{
			name:'老王',
			sex:'难'
		}
	]
};
//这个是ts的类型校验不用就删掉<{ userData: UserDataType; setData: React.Dispatch<React.SetStateAction<UserDataType>> }>
// 创建一个 Context 对象
export const AllUserData = createContext<{ userData: UserDataType; setData: React.Dispatch<React.SetStateAction<UserDataType>> }>({
  userData: UserData,
  setData: () => { },
});
// 创建一个 Context Provider 组件，用于提供共享数据
export const AllUserDataProvider: React.FC = ({ children }) => {
  // 定义共享数据的初始值
  const [userData, setData] = useState<UserDataType>(UserData);
  // 使用 useMemo 包裹 contextValue; ps:这个是用来检查接收到的值是否有修改
  const contextValue = useMemo(() => ({
    userData,
    setData,
  }), [userData]);
  // ps:这个是加载组件的时候执行的一个Hook，也可以用来监听数据变化，详情可以查看文档
  useEffect(() => {
    try {
      setData({...userData,bossName:'小六子',bossSex:'暂定为男'})
      console.log('这里可以在demo第一次加载时添加一些数据给userData');
    } catch (e) {
      console.log('出错了');
    }
  }, [])
  //ps:这里不用动写的是useMemo的名字如果没加useMemo就改成：{/* <AllUserData.Provider value={{ userData, setData }}> */}
  return (
    <AllUserData.Provider value={contextValue}>
      {children}
    </AllUserData.Provider>
  );
}
//导出方法ps: 与外部沟通的桥梁使用时要用
export function useAppContext() {
  return useContext(AllUserData);
}

---

然后要用AllUserDataProvider包裹最外层的APP组件

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import { AllUserDataProvider } from './userData-unitls';
ReactDom.render(
  <AllUserDataProvider>
    <App />
  </AllUserDataProvider>,
  document.getElementById('root')
);

---

接下来是使用方法

//组件内引入需要的Hook
import React, { useState, useEffect } from "react";
// 使用一个Input组件示范效果
import { Input } from "@alifd/next";
//这个是引入刚才的demo
import { useAppContext } from "../userData-unitls"

function InputsComStr(){
  //!!!!!从useAppContext()内取出demo内的userData(全局数据)和setData(修改全局数据的方法)
  const { userData, setData } = useAppContext();
  //这个是change方法
  const dxchan = (e: string | number) => {
  	  //这里是给全局状态做修改
      setData({...userData,bossName:e})
  };
  return <div className="InputDiv">
    <Input className="w100"
      placeholder="输入boss姓名" 
      aria-label="Medium" 
      defaultValue={userData.bossName}
      value={userData.bossName}
      onChange={(e:string)=>dxchan(e)}/>
      <h3>Boss的名字是：{userData.bossName}</h3>
  </div>
}
export default InputsComStr;