成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

比Redux更容易上手的狀態(tài)管理庫(kù)

CNZPH / 578人閱讀

摘要：前言當(dāng)項(xiàng)目越發(fā)復(fù)雜時(shí)，我們發(fā)現(xiàn)僅僅是提升狀態(tài)已經(jīng)無(wú)法適應(yīng)如此復(fù)雜的狀態(tài)管理了，程序狀態(tài)變得比較難同步，操作，到處是回調(diào)，發(fā)布，訂閱，這意味著我們需要更好的狀態(tài)管理方式，于是就引入了狀態(tài)管理庫(kù)，如，，，等。

前言

當(dāng)項(xiàng)目越發(fā)復(fù)雜時(shí)，我們發(fā)現(xiàn)僅僅是提升狀態(tài)已經(jīng)無(wú)法適應(yīng)如此復(fù)雜的狀態(tài)管理了，程序狀態(tài)變得比較難同步，操作，到處是回調(diào)，發(fā)布，訂閱，這意味著我們需要更好的狀態(tài)管理方式，于是就引入了狀態(tài)管理庫(kù)，如Redux，Mobx，Jumpsuit，Alt.js等。

Mobx是什么

對(duì)于我來(lái)說(shuō)Mobx幾乎和Vue一樣，通過(guò)監(jiān)聽數(shù)據(jù)的屬性變化，可以通過(guò)直接在數(shù)據(jù)上更改就能觸發(fā)UI的渲染，從而做到MVVM、響應(yīng)式、上手快，Api簡(jiǎn)單等等。

安裝 npm install mobx --save

原則 

mobx支持單向數(shù)據(jù)流也就是動(dòng)作改變狀態(tài)，而狀態(tài)的改變會(huì)更新所有受影響的視圖。如下圖

一個(gè)簡(jiǎn)單的react+mobx的計(jì)算實(shí)例

npm install mobx-react --save // 下載mobx
import { observable, action } c // 應(yīng)用mobx
const counter = {
    state: observable({
        count: 0
    }),
        
    add: action(function() {
        this.state.count ++ 
    })
}
export default counter

// 這時(shí)候 counter的結(jié)構(gòu)是這樣的
{
    state: { count: 0 }
    add: function
}

// 現(xiàn)在我們將mobx和react聯(lián)系起來(lái)；
import { observer } from "mobx-react"
import counter from "./counter"
const CouterView = () => {
return (
    

      { counter.state.count } //這里的count時(shí)計(jì)數(shù)器里的數(shù)據(jù)
           // 點(diǎn)擊按鈕會(huì)把數(shù)字加1
        

    )
}

export default observer(CouterView);
// 這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的mobx的數(shù)據(jù)管理庫(kù)

小結(jié)

在mobx中沒(méi)有reducer這一層，所以不需要為了action和reducer之間的通信而使代碼高度抽象。
mobx里state的更新是很直觀的，通過(guò)賦值行為即可，而不需要dispatch或者setState這樣的方法。

寫的不詳細(xì)，如有需要者，請(qǐng)前往官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108580.html

相關(guān)文章

  • 我理想中的狀態(tài)管理工具

    摘要：現(xiàn)已存在許多成熟的狀態(tài)管理解決方案，還有基于的但對(duì)于我個(gè)人來(lái)說(shuō)，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)簡(jiǎn)單易用，并且適合中大型項(xiàng)目完美地支持要做到這兩點(diǎn)其實(shí)并不簡(jiǎn)單。所以我決定自己造一個(gè)可能是基于和最好的狀態(tài)管理工具 現(xiàn)已存在許多成熟的狀態(tài)管理解決方案：Redux、Mobx、Mobx-state-tree，還有基于 Redux 的 Dva.js、Rematch... 但對(duì)于我個(gè)人來(lái)說(shuō)，...

    roadtogeek 評(píng)論0 收藏0

  • React 教程：快速上手指南

    摘要：由于其名氣和穩(wěn)定性獲得了廣泛好評(píng)。但是實(shí)際上在中并不是非常必要的。因此，這些結(jié)果也是純粹的速度實(shí)驗(yàn)。它是否容易使用，開發(fā)過(guò)程是否令人愉快年和年的狀態(tài)報(bào)告顯示，和都享有良好的聲譽(yù)，大多數(shù)開發(fā)人員表示會(huì)再次使用。上手最簡(jiǎn)單和最快的學(xué)習(xí)曲線。 翻譯：瘋狂的技術(shù)宅原文：https://www.toptal.com/react/... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)...

    Vultr 評(píng)論0 收藏0

  • Byemess-基于React&redux的在線Todo應(yīng)用

    摘要：在線注冊(cè)賬號(hào)，數(shù)據(jù)存儲(chǔ)于。年了，還不使用的異步控制體系。過(guò)度對(duì)數(shù)據(jù)模型進(jìn)行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲(chǔ)數(shù)據(jù)有關(guān)。 為什么又是Todo，全世界的初學(xué)者都在做todo嗎？可能很多人要問(wèn)這句話，其實(shí)這句話可以等同于： 為什么你做了個(gè)云音樂(lè)播放器？ 為什么你做了個(gè)新聞閱讀APP？ 為什么你做了個(gè)VUE/REACT版本的CNODE？ 究其本質(zhì)，這幾個(gè)應(yīng)用都是data-map...

    MRZYD 評(píng)論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來(lái)解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫(kù)之間的困惑。這甚至是危險(xiǎn)的，因?yàn)檫@部分人將無(wú)法體驗(yàn)和這些庫(kù)所要解決的問(wèn)題。這肯定是要第一時(shí)間解決的問(wèn)題。函數(shù)式編程是不斷上升的范式，但對(duì)于大部分開發(fā)者來(lái)說(shuō)是新奇的。規(guī)模持續(xù)增長(zhǎng)的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評(píng)論0 收藏0

  • react+react-router4+redux最新版構(gòu)建分享

    摘要：相關(guān)配置請(qǐng)參考中文文檔。關(guān)于的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會(huì)整理后再單獨(dú)章節(jié)分享接下來(lái)我們將編寫路由組件這與有一些差別，原來(lái)的方法已經(jīng)不再使用，在中或組件從中引入。 ??????相信很多剛?cè)肟覴eact的小伙伴們有一個(gè)同樣的疑惑，由于React相關(guān)庫(kù)不斷的再進(jìn)行版本迭代，網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-...

    weapon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<