【前端状态管理】觉得Redux-useReducer+Context太复杂？学习最简单的全局状态管理方案

该方案摒弃了Reducers+ActionTypes，主要分为三步：基于hooks构建Store，基于context将Store传给子组件，从子组件更新Store，触发渲染1.基于hooksuserStore构建Store。tsximport{useState}from'react'exportdefaultfunctionuseUserStore(){const[user,setUser]=useState({})return{setUser,user,}}loginStore.tsximport{useState}from'react'exportdefaultfunctionuseLoginStore(){const[login,setLogin]=useState(false)return{login,setLogin,}}2.根据上下文将Store传给子组件context.tsximportuseUserStorefrom"./userStore";importuseLoginStorefrom“./loginStore”；从“react”导入{createContext}；导出constcontext=createContext(null)；导出默认函数Context({children}){constuserStore=useUserStore();constloginStore=useLoginStore();console.log("userStore",userStore);constcontextValue={userStore,loginStore};返回{children};}app.tsximportContextfrom"./context";importChildfrom"./child";exportdefaultfunctionIndex(){return();}3.子组件更新Store并触发渲染，完成child.tsximport{useContext,useEffect}from"react";import{context}from"./context";exportdefaultfunctionChild(){conststore=useContext(context);控制台日志（存储）；const{user,setUser}=store?.userStore||{};const{login,setLogin}=store?.loginStore||{};useEffect(()=>{setTimeout(()=>{setUser({name:"AwesomeDevin"});setLogin(true);},2000);},[setUser,setLogin]);return(

);}在线DEMOhttps://codesandbox.io/s/reac...简单场景可以直接使用useContext，复杂应用建议使用useContextSelector库，更好解决context的性能问题。当然你也可以试试zustand/mobx等外部状态管理库，轻量级好用。