react hooks 和 vue3 不使用状态管理工具实现全局响应

reacthooks和vue3都没有使用状态管理工具来实现全局响应响应。但是，使用这些工具一般有一个所谓的bestpractice原则，就是不会用就不要用。也就是说，除非有些功能不使用无法优雅实现，否则最好不要使用。你怎么理解这个？比如我们做一个简单的网站全局中英文切换。一般情况下，语言类型变量是全局定义的，可以在站点的header组件上切换。那么组件结构可能是：

此时假设不使用全局状态管理工具，语言类型变量数据和切换函数为在头层维护。那么在没有全局状态管理的情况下，需要在很多组件之间传递语言变量。同时，还有一个问题。如果产品说不仅要在header里切换语言，还要在一两个组件之间切换，那问题就更麻烦了。尽管如此，这个场景在业务上并不复杂。为了全局响应一个瘦语言切换变量，多装vuex包，写store.js，定义mutations，看似合理又不合理。.不合理的原因很明显，功能薄，框架重。React的createContext/useContext和vue3的provide/inject所以，在比较简单的全局响应场景下，vuex、redux等状态管理工具并不适用，合适的方式自然追求减负和体积对应的全局响应功能。下面说一下目前可用的两种方式。1、Reacthooks的createContext/useContext操作方法：首先在App.tsx文件等根组件中定义需要全局响应的state，及其setState方法。这两个东西分别创建一个Context（createContext），然后在stateContext.Provider标签上传状态，setState.Provider标签上传setState，在需要读写的后代组件上拿到这两个Context，然后就可以读写了修改后代组件的全局数据：//App.tsximportReact,{createContext,FC,Dispatch,SetStateAction,useState}from'react';importHelloWorldfrom'./components/HelloWorld'interfaceStateInf{name:number;}constdefaultState:StateInf={名称:111}exportconststateContext=createContext(defaultState)exportconstsetStateContext=createContext>|undefined>(undefined)constApp:FC=()=>{const[state,setState]=useState(defaultState)constchangeState=()=>{//在根组件中修改全局名称变量setState({...state,name:222})}return(

{state.name}</div>根组件改变状态)}exportdefaultApp//HelloWorld.tsximportReact,{useContext,FC,Dispatch,SetStateAction}from'react';import{stateContext,setStateContext}from'../App'constHelloWorld:FC=()=>{conststate=useContext<{name:number}>(stateContext)常量setState=useContext>|undefined>(setStateContext)constchangeState=()=>{if(setState){//这里传递函数参数，实现后代组件的全局状态修改setState(state=>{return{...state,name:222}})}}return(

后代组件改变全局状态值

{state.name}

)}exportdefaultHelloWorld2.vue3的provide/inject其实就是文档中也提到了vue3的方法。同样，需要修改的数据及其修改方法通过provide传递，比React的操作更加简洁：//App.vue//HelloWorld.vue结论这两个操作我觉得很舒服，推荐。在一定程度上，它们可以替代一些状态管理工具的能力。至于react的低版本，vue2能不能实现，我尝试的结果是暂时不能实现，有兴趣的兄弟可以试试。如果实现了，可以在评论区指出，贴上关键代码。这里所谓的“实现”与上面两种方案类似。它不仅全局定义状态，而且上层的修改可以响应下层，下层也可以修改并响应上层。