在react中使用vue的状态管理的方法示例


Posted in Javascript onMay 02, 2020

我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙。

马上体验

在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控。但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错。为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发。于是有了类似 dva、rematch 等这样的项目,这些项目基于 redux 再做了一层封装,让开发者少写了很多 reducer 相关的代码,但是很无奈,immutable 的特性,让开发需要付出更多的精力来控制每一个更新。

再另一个世界,mutable state 其实也非常优秀。知名的 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 式的数据管理?你不妨来试试下面的代码:

function MyComponent(props) {
 const { one } = props
 const { name, age, height, married, sex, changeSex, me, book, updateBook } = one
 return (
  <>
   {!!me && (
    <>
     <span>{me.user_name_zh}, {me.user_position}</span>
     <br />
    </>
   )}
   <span>{name}: {age}, {height}, {married ? 'married,' : ''} {sex ? 'F' : 'M'}</span>
   <br />
   <span>book: {book.price || 0}</span>
   <br />
   <button type="button" onClick={() => one.age ++}>grow</button>
   <button type="button" onClick={() => changeSex(!sex)}>change</button>
   <button type="button" onClick={() => updateBook({ price: (Math.random() * 100).toFixed(2) })}>update</button>
  </>
 )
}

const mapToProps = (contexts) => {
 const { one } = contexts
 return {
  one,
 }
}

export default connect(mapToProps)(MyComponent)

看这代码啊,和 react-redux 有点像,完全可以理解是不。

在数据开始对组件进行注入的时候,保持和 react-redux 一致的使用效果,这实在是无缝的思想过渡,你觉得从原来写 react-redux 的代码到写这样的代码,会有压力吗?没有,一点都没有。下面来看看这种全局状态管理的真面目:

import React from 'react'
import { use, connect } from 'react-tyshemo'

class Book {}

use({
 name: 'one',
 state: {
  name: 'one',
  age: 10,
  book: new Book(),
 },
 computed: {
  height() {
   return this.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,这样,你就可以很清晰这个组件实际依赖的是哪一个 state namespace,并且可以通过 IDE 的定义链接,直接进入 def 文件查看 methods。这样也让一个组件,无论是自己局部的 state 还是依赖的全局的 state,都在一个文件中可以找到。

到此这篇关于在react中使用vue的状态管理的方法示例的文章就介绍到这了,更多相关react使用vue状态管理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 #Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 #Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
JS深入学习之数组对象排序操作示例
May 01 #Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
python复制文件的方法实例详解
2015/05/22 Python
python生成验证码图片代码分享
2016/01/28 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
25岁生日感言
2014/01/13 职场文书
写给女生的道歉信
2014/01/14 职场文书
上班看电影检讨书
2014/02/12 职场文书
高中运动会广播稿
2014/09/16 职场文书
股东大会通知
2015/04/24 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书