在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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
VSCode搭建React Native环境
May 07 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python3实现Web网页图片下载
2016/01/28 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
志愿者服务感言
2014/02/27 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
卡特教练观后感
2015/06/08 职场文书
2016党校培训心得体会
2016/01/07 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
python中pycryto实现数据加密
2022/04/29 Python