在react中如何使用vue的狀態(tài)管理

這篇文章主要講解了在react中如何使用vue的狀態(tài)管理，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的陳倉(cāng)網(wǎng)站建設(shè)公司，陳倉(cāng)接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行陳倉(cāng)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

我是要介紹一個(gè)新的 react 全局共享狀態(tài)管理器，它和 vue 組件的狀態(tài)管理一起同工之妙。

馬上體驗(yàn)

在 react 狀態(tài)管理領(lǐng)域，react-redux 可謂是只手遮天了，基于 flux 思想實(shí)現(xiàn)，小巧，immutable 的思想讓數(shù)據(jù)變化可控。但 immutable 所帶來(lái)的編程代價(jià)太大了，如果你要更新一個(gè)深層結(jié)構(gòu)的對(duì)象的某個(gè)節(jié)點(diǎn)，寫(xiě)作將會(huì)是極其麻煩的一件事，而且還保不準(zhǔn)會(huì)出錯(cuò)。為了保證 immutable，redux 的 reducer 機(jī)制讓開(kāi)發(fā)者掉光了頭發(fā)。于是有了類(lèi)似 dva、rematch 等這樣的項(xiàng)目，這些項(xiàng)目基于 redux 再做了一層封裝，讓開(kāi)發(fā)者少寫(xiě)了很多 reducer 相關(guān)的代碼，但是很無(wú)奈，immutable 的特性，讓開(kāi)發(fā)需要付出更多的精力來(lái)控制每一個(gè)更新。

再另一個(gè)世界，mutable state 其實(shí)也非常優(yōu)秀。知名的 mobx 推出了 mobx-react 和 react-redux 競(jìng)爭(zhēng)。然而，原本非常優(yōu)秀的 mobx 卻只管把自己的想法強(qiáng)加于人，而忽視了代碼寫(xiě)作的便捷性，總之，使用起來(lái)雖然不用再為 reducer 頭疼，卻對(duì)組件的侵入和讓人很不適應(yīng)。你需要了解它的概念，特別是基于觀察者模式的很多概念，它提供的 api 的形式也很豐富，基于接口的、裝飾器的，總之，你在掀開(kāi)它的魔法盒子時(shí)，會(huì)忍不住“wo\cao/”，但當(dāng)你真正在項(xiàng)目中嘗試使用它時(shí)，確會(huì)不由但發(fā)出“wo^cao\”，但就在心智折騰上，就讓人抓狂，還不知道會(huì)產(chǎn)生多少副作用 bug。

在 mutable 數(shù)據(jù)管理最優(yōu)秀的，莫過(guò)于 vue。無(wú)論初識(shí)還是長(zhǎng)久，都會(huì)與 vue 的響應(yīng)式數(shù)據(jù)相看兩不厭。它簡(jiǎn)介的用法，以及把基本原理告訴你，讓你盡情去修改數(shù)據(jù)。Mutable 相對(duì)于 immutable 的最大好處，就是可以對(duì)對(duì)象任意節(jié)點(diǎn)上的對(duì)象進(jìn)行修改，而無(wú)需仔細(xì)的把握這個(gè)節(jié)點(diǎn)在整個(gè) state 的什么位置上，在 redux 的實(shí)踐中，你可能都已經(jīng)厭煩了寫(xiě) ... 來(lái)解構(gòu)對(duì)象/數(shù)組了，但在 vue 中，根本不需要擔(dān)心這一個(gè)點(diǎn)，直接逮住一個(gè)對(duì)象，立即修改它的某個(gè)屬性，完事走人，不需要先構(gòu)造出一個(gè)新的數(shù)據(jù)，不需要調(diào)用某個(gè)接口把這個(gè)新數(shù)據(jù)傳入進(jìn)去。雖然 redux 那種每一個(gè)狀態(tài)都是全新的思想很好，但是，你的狀態(tài)不可能是全新的，每一個(gè)被認(rèn)為是全新的狀態(tài)，都包含了老狀態(tài)的一部分（對(duì)象節(jié)點(diǎn)），而這些引用，可能帶來(lái)后續(xù)的錯(cuò)誤。在 react 生態(tài)中，你可以使用 immutable.js 來(lái)盡可能避免這個(gè)問(wèn)題。

但是在 vue 生態(tài)中，用于管理全局狀態(tài)的 vuex 確非得要引入 mutions, actions 的概念，這都是從 flux 借鑒過(guò)來(lái)的，而且很奇怪的是，在 mutions 中定義的修改，又要到 actions 中重做一遍。實(shí)在是有點(diǎn)自廢武功啊。有沒(méi)有一種方法，可以在 react 中真正享受 vue 式的數(shù)據(jù)管理？你不妨來(lái)試試下面的代碼：

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 &#63; 'married,' : ''} {sex &#63; '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 有點(diǎn)像，完全可以理解是不。

在數(shù)據(jù)開(kāi)始對(duì)組件進(jìn)行注入的時(shí)候，保持和 react-redux 一致的使用效果，這實(shí)在是無(wú)縫的思想過(guò)渡，你覺(jué)得從原來(lái)寫(xiě) react-redux 的代碼到寫(xiě)這樣的代碼，會(huì)有壓力嗎？沒(méi)有，一點(diǎn)都沒(méi)有。下面來(lái)看看這種全局狀態(tài)管理的真面目：

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/” 絕對(duì)是抄 vue！連屬性名字都和 vue 組件一毛一樣（多了一個(gè) hooks）。用一個(gè) use 函數(shù)注冊(cè)一個(gè) state 的 namespace，并且這這個(gè)注冊(cè)定義對(duì)象中，傳入 state, computed, methods, watch 等來(lái)實(shí)現(xiàn)狀態(tài)數(shù)據(jù)的處理。由于對(duì)數(shù)據(jù)的操作和 vue 是一摸一樣，所以，你不用擔(dān)心 ajax 請(qǐng)求的異步問(wèn)題了，不需要考慮一大堆 redux 帶來(lái)的“解決問(wèn)題帶來(lái)的問(wèn)題”。

看上去是不是很舒服呢？我們來(lái)看下運(yùn)行效果

codesandbox

react-tyshemo 只提供幾個(gè)函數(shù)接口，避免 mobx-react 那般復(fù)雜。另外，和其他所有 react 狀態(tài)庫(kù)提供 Provider 不同，react-tyshemo 直接 connect 就完事了，不需要 Provider。另外，在項(xiàng)目結(jié)構(gòu)上，你可以在不同的文件中使用 use 相同的 def，這樣，你就可以很清晰這個(gè)組件實(shí)際依賴(lài)的是哪一個(gè) state namespace，并且可以通過(guò) IDE 的定義鏈接，直接進(jìn)入 def 文件查看 methods。這樣也讓一個(gè)組件，無(wú)論是自己局部的 state 還是依賴(lài)的全局的 state，都在一個(gè)文件中可以找到。

看完上述內(nèi)容，是不是對(duì)在react中如何使用vue的狀態(tài)管理有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：在react中如何使用vue的狀態(tài)管理
文章源于：http://bm7419.com/article4/gegjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信小程序、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容