亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

CNZPH / 638人閱讀

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

前言

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

Mobx是什么

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

安裝 npm install mobx --save

原則 

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

一個簡單的react+mobx的計算實例

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

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

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

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

    )
}

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

小結(jié)

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

寫的不詳細，如有需要者，請前往官方文檔

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108580.html

相關(guān)文章

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

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

    roadtogeek 評論0 收藏0

  • React 教程：快速上手指南

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

    Vultr 評論0 收藏0

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

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

    MRZYD 評論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

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

    txgcwm 評論0 收藏0

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

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

    weapon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<