本文正在参加「金石计划 . 瓜分6万现金大奖」
引言
随着react hooks的推出演变，当前已经出现了许多基于hooks版本的轻量级状态管理工具，今天我们就基于useContext构建一个属于自己的状态管理工具吧。
设计方案
整体设计方案十分清晰简单，使用context将数据和修改数据的方法挂载到全局根组件上，借助useContext其他组件可以任意的访问全局数据，同时可以借助方法任意的修改全局数据。
项目构建
1.创建context目录，用于保存对应context与全局数据
user与book用于存储不同的全局数据，
2.user目录下创建下创建user的context与user的数据
user/data.js：基于useState保存数据，并设计修改数据的方法
import { useState } from "react";
export default () => {
const user = {
name:'dzp',
age:22
}
//全局数据
const [userInfo,setUserInfo] = useState(user);
/修改名称
const changeUserName = (name) => {
setUserInfo({
...userInfo,
name
})
}
//修改年龄
const changeUserAge = (age) => {
setUserInfo({
...userInfo,
age
})
}
return {
userInfo,
changeUserName,
changeUserAge
}
}
context.js:保持user的context，useContext需要使用
import { createContext } from "react";
export default createContext()
3.App根组件下挂载context数据
import userData from "./context/user/data";
import userContext from "./context/user/context";
import Page1 from "./components/Page1/index";
import Page2 from "./components/Page2/index";
function App() {
//1.获取user全局数据与修改user数据的方法
const {userInfo,changeUserName,changeUserAge} = userData()
//。。。此处可以继续挂载其他全局数据
return (
<div>
//2.将user数据与修改数据的方挂载到context上，传递给后代组件使用
<userContext.Provider value={{userInfo,changeUserName,changeUserAge}}>
<Page1/>
-------------
<Page2/>
</userContext.Provider>
</div>
)
}
export default App;
4.其他组件使用/修改全局数据
使用page1组件获取user数据，并尝试修改全局user的name属性， 使用page2组件获取user数据，并尝试修改全局user的age属性。
Page1.js
import context from "./../../context/user/context";
import { useContext } from "react";
export default ()=>{
//user上挂载了user模块数据与修改user数据的方法。
const user = useContext(context);
return (
<div>
组件1
<div>{user.userInfo.name}</div>
<div>{user.userInfo.age}</div>
<div onClick={()=>user.changeUserName(`名称：${Date.now()}`)}>修改名称</div>
</div>
)
}
Page2.js
import context from "./../../context/user/context";
import { useContext } from "react";
export default ()=>{
//user上挂载了user模块数据与修改user数据的方法。
const user = useContext(context);
return (
<div>
组件2
<div>{user.userInfo.name}</div>
<div>{user.userInfo.age}</div>
<div onClick={()=>user.changeUserAge(user.userInfo.age+1)}>修改年纪</div>
</div>
)
}
效果
可以清楚的看到任意两个组件修改数据时，全局数据都会保持一致。
总结
使用useContext+useState可以轻松搭建属于个人的全局状态存储工具，大家快去试试吧。
