在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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
微信小程序 教程之事件
Oct 18 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
Angular利用HTTP POST下载流文件的步骤记录
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中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
详解Python中的动态属性和特性
2018/04/07 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
centos7之Python3.74安装教程
2019/08/15 Python
python实现简单的tcp 文件下载
2020/09/16 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
大学生涯自我鉴定
2014/01/16 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
调解协议书
2014/04/16 职场文书
学习方法演讲稿
2014/05/10 职场文书
安全承诺书格式
2014/05/21 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
新课培训心得体会
2014/09/03 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
导游词之天津盘山
2019/11/01 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js