我是要介绍一个新的 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 "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,都在一个文件中可以找到。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]