在react中使用vue的状态管理的方法示例
我是要介绍一个新的react全局共享状态管理器，它和vue组件的状态管理一起同工之妙。
马上体验
在react状态管理领域，react-redux可谓是只手遮天了，基于flux思想实现，小巧，immutable的思想让数据变化可控。但immutable所带来的编程代价太大了，如果你要更新一个深层结构的对象的某个节点，写作将会是极其麻烦的一件事，而且还保不准会出错。为了保证immutable，redux的reducer机制让开发者掉光了头发。于是有了类似dva、rematch等这样的项目，这些项目基于redux再做了一层封装，让开发者少写了很多reducer相关的代码，但是很无奈，immutable的特性，让开发需要付出更多的精力来控制每一个更新。
再另一个世界，mutablestate其实也非常优秀。知名的mobx推出了mobx-react和react-redux竞争。然而，原本非常优秀的mobx却只管把自己的想法强加于人，而忽视了代码写作的便捷性，总之，使用起来虽然不用再为reducer头疼，却对组件的侵入和让人很不适应。你需要了解它的概念，特别是基于观察者模式的很多概念，它提供的api的形式也很丰富，基于接口的、装饰器的，总之，你在掀开它的魔法盒子时，会忍不住“wo\cao/”，但当你真正在项目中尝试使用它时，确会不由但发出“wo^cao\”，但就在心智折腾上，就让人抓狂，还不知道会产生多少副作用bug。
在mutable数据管理最优秀的，莫过于vue。无论初识还是长久，都会与vue的响应式数据相看两不厌。它简介的用法，以及把基本原理告诉你，让你尽情去修改数据。Mutable相对于immutable的最大好处，就是可以对对象任意节点上的对象进行修改，而无需仔细的把握这个节点在整个state的什么位置上，在redux的实践中，你可能都已经厌烦了写...来解构对象/数组了，但在vue中，根本不需要担心这一个点，直接逮住一个对象，立即修改它的某个属性，完事走人，不需要先构造出一个新的数据，不需要调用某个接口把这个新数据传入进去。虽然redux那种每一个状态都是全新的思想很好，但是，你的状态不可能是全新的，每一个被认为是全新的状态，都包含了老状态的一部分（对象节点），而这些引用，可能带来后续的错误。在react生态中，你可以使用immutable.js来尽可能避免这个问题。
但是在vue生态中，用于管理全局状态的vuex确非得要引入mutions,actions的概念，这都是从flux借鉴过来的，而且很奇怪的是，在mutions中定义的修改，又要到actions中重做一遍。实在是有点自废武功啊。有没有一种方法，可以在react中真正享受vue式的数据管理？你不妨来试试下面的代码：
functionMyComponent(props){
const{one}=props
const{name,age,height,married,sex,changeSex,me,book,updateBook}=one
return(
<>
{!!me&&(
<>
{me.user_name_zh},{me.user_position}
)}
{name}:{age},{height},{married?'married,':''}{sex?'F':'M'}
book:{book.price||0}
one.age++}>grow
changeSex(!sex)}>change
updateBook({price:(Math.random()*100).toFixed(2)})}>update
)
}
constmapToProps=(contexts)=>{
const{one}=contexts
return{
one,
}
}
exportdefaultconnect(mapToProps)(MyComponent)
看这代码啊，和react-redux有点像，完全可以理解是不。
在数据开始对组件进行注入的时候，保持和react-redux一致的使用效果，这实在是无缝的思想过渡，你觉得从原来写react-redux的代码到写这样的代码，会有压力吗？没有，一点都没有。下面来看看这种全局状态管理的真面目：
importReactfrom'react'
import{use,connect}from'react-tyshemo'
classBook{}
use({
name:'one',
state:{
name:'one',
age:10,
book:newBook(),
},
computed:{
height(){
returnthis.age*5
},
},
watch:{
age({value}){
if(value>22){
this.married=true
}
},
},
methods:{
changeSex(sex){
this.sex=sex
},
updateBook(data){
Object.assign(this.book,data)
this.dispatch('book')
},
},
hooks:{
onUse(){
fetch('/api/me').then(res=>res.json()).then((json)=>{
const{data}=json
this.me=data
})
},
},
})
看完什么感受？“wo/cao/”绝对是抄vue！连属性名字都和vue组件一毛一样（多了一个hooks）。用一个use函数注册一个state的namespace，并且这这个注册定义对象中，传入state,computed,methods,watch等来实现状态数据的处理。由于对数据的操作和vue是一摸一样，所以，你不用担心ajax请求的异步问题了，不需要考虑一大堆redux带来的“解决问题带来的问题”。
看上去是不是很舒服呢？我们来看下运行效果
codesandbox
react-tyshemo只提供几个函数接口，避免mobx-react那般复杂。另外，和其他所有react状态库提供Provider不同，react-tyshemo直接connect就完事了，不需要Provider。另外，在项目结构上，你可以在不同的文件中使用use相同的def，这样，你就可以很清晰这个组件实际依赖的是哪一个statenamespace，并且可以通过IDE的定义链接，直接进入def文件查看methods。这样也让一个组件，无论是自己局部的state还是依赖的全局的state，都在一个文件中可以找到。
到此这篇关于在react中使用vue的状态管理的方法示例的文章就介绍到这了,更多相关react使用vue状态管理内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！