建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要講解了在react中如何使用vue的狀態(tài)管理，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
我是要介紹一個新的 react 全局共享狀態(tài)管理器，它和 vue 組件的狀態(tài)管理一起同工之妙。
馬上體驗
在 react 狀態(tài)管理領(lǐng)域，react-redux 可謂是只手遮天了，基于 flux 思想實(shí)現(xiàn)，小巧，immutable 的思想讓數(shù)據(jù)變化可控。但 immutable 所帶來的編程代價太大了，如果你要更新一個深層結(jié)構(gòu)的對象的某個節(jié)點(diǎn)，寫作將會是極其麻煩的一件事，而且還保不準(zhǔn)會出錯。為了保證 immutable，redux 的 reducer 機(jī)制讓開發(fā)者掉光了頭發(fā)。于是有了類似 dva、rematch 等這樣的項目，這些項目基于 redux 再做了一層封裝，讓開發(fā)者少寫了很多 reducer 相關(guān)的代碼，但是很無奈，immutable 的特性，讓開發(fā)需要付出更多的精力來控制每一個更新。
再另一個世界，mutable state 其實(shí)也非常優(yōu)秀。知名的 mobx 推出了 mobx-react 和 react-redux 競爭。然而，原本非常優(yōu)秀的 mobx 卻只管把自己的想法強(qiáng)加于人，而忽視了代碼寫作的便捷性，總之，使用起來雖然不用再為 reducer 頭疼，卻對組件的侵入和讓人很不適應(yīng)。你需要了解它的概念，特別是基于觀察者模式的很多概念，它提供的 api 的形式也很豐富，基于接口的、裝飾器的，總之，你在掀開它的魔法盒子時，會忍不住“wo\cao/”，但當(dāng)你真正在項目中嘗試使用它時，確會不由但發(fā)出“wo^cao\”，但就在心智折騰上，就讓人抓狂，還不知道會產(chǎn)生多少副作用 bug。
在 mutable 數(shù)據(jù)管理最優(yōu)秀的，莫過于 vue。無論初識還是長久，都會與 vue 的響應(yīng)式數(shù)據(jù)相看兩不厭。它簡介的用法，以及把基本原理告訴你，讓你盡情去修改數(shù)據(jù)。Mutable 相對于 immutable 的大好處，就是可以對對象任意節(jié)點(diǎn)上的對象進(jìn)行修改，而無需仔細(xì)的把握這個節(jié)點(diǎn)在整個 state 的什么位置上，在 redux 的實(shí)踐中，你可能都已經(jīng)厭煩了寫 ... 來解構(gòu)對象/數(shù)組了，但在 vue 中，根本不需要擔(dān)心這一個點(diǎn)，直接逮住一個對象，立即修改它的某個屬性，完事走人，不需要先構(gòu)造出一個新的數(shù)據(jù)，不需要調(diào)用某個接口把這個新數(shù)據(jù)傳入進(jìn)去。雖然 redux 那種每一個狀態(tài)都是全新的思想很好，但是，你的狀態(tài)不可能是全新的，每一個被認(rèn)為是全新的狀態(tài)，都包含了老狀態(tài)的一部分（對象節(jié)點(diǎn)），而這些引用，可能帶來后續(xù)的錯誤。在 react 生態(tài)中，你可以使用 immutable.js 來盡可能避免這個問題。
但是在 vue 生態(tài)中，用于管理全局狀態(tài)的 vuex 確非得要引入 mutions, actions 的概念，這都是從 flux 借鑒過來的，而且很奇怪的是，在 mutions 中定義的修改，又要到 actions 中重做一遍。實(shí)在是有點(diǎn)自廢武功啊。有沒有一種方法，可以在 react 中真正享受 vue 式的數(shù)據(jù)管理？你不妨來試試下面的代碼：
function MyComponent(props) {
const { one } = props
const { name, age, height, married, sex, changeSex, me, book, updateBook } = one
return (
<>
{!!me && (
<>
{me.user_name_zh}, {me.user_position}
)}
{name}: {age}, {height}, {married ? 'married,' : ''} {sex ? 'F' : 'M'}
book: {book.price || 0}
)
}
const mapToProps = (contexts) => {
const { one } = contexts
return {
one,
}
}
export default connect(mapToProps)(MyComponent) 文章題目：在react中如何使用vue的狀態(tài)管理-創(chuàng)新互聯(lián)
分享路徑：http://www.ef60e0e.cn/article/cdhidc.html
