在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 相关文章推荐
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
Vue formData实现图片上传
Aug 20 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
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
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python实现三维拟合的方法
2018/12/29 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python3 enum模块的应用实例详解
2019/08/12 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
python 下载文件的几种方法汇总
2021/01/06 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
证婚人搞笑证婚词
2014/01/10 职场文书
英语简历自我评价
2014/01/26 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
统计学教授推荐信
2014/09/18 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
企业计划生育责任书
2015/05/09 职场文书
宾馆安全管理制度
2015/08/06 职场文书
关于做家务的心得体会
2016/01/23 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
MySQL数据库查询之多表查询总结
2022/08/05 MySQL