資訊專欄INFORMATION COLUMN
摘要：一關(guān)于狀態(tài)管理它們都有統(tǒng)一維護(hù)管理應(yīng)用狀態(tài)的能力某一狀態(tài)只有一個(gè)可信數(shù)據(jù)來(lái)源通常命名為，指狀態(tài)容器操作更新狀態(tài)方式統(tǒng)一，并且可控通常以方式提供更新狀態(tài)的途徑支持將與組件連接，如，通常使用狀態(tài)管理庫(kù)后，我們將組件從業(yè)務(wù)上劃分為兩類容器組件
一. 關(guān)于狀態(tài)管理
它們都有統(tǒng)一維護(hù)管理應(yīng)用狀態(tài)的能力；
某一狀態(tài)只有一個(gè)可信數(shù)據(jù)來(lái)源（通常命名為store，指狀態(tài)容器）；
操作更新狀態(tài)方式統(tǒng)一，并且可控（通常以action方式提供更新狀態(tài)的途徑）；
支持將store與React組件連接，如react-redux，mobx-react；通常使用狀態(tài)管理庫(kù)后，我們將React組件從業(yè)務(wù)上劃分為兩類：
容器組件（Container Components）：負(fù)責(zé)處理具體業(yè)務(wù)和狀態(tài)數(shù)據(jù)，將業(yè)務(wù)或狀態(tài)處理函數(shù)傳入展示型組件；
展示型組件（Presentation Components）：負(fù)責(zé)展示視圖，視圖交互回調(diào)內(nèi)調(diào)用傳入的處理函數(shù)；
二. 關(guān)注點(diǎn)的不同
1. Redux更多的是遵循Flux模式的一種實(shí)現(xiàn)，是一個(gè)JavaScript庫(kù)，它的關(guān)注點(diǎn)在于：
Action：一個(gè)JavaScript對(duì)象，描述動(dòng)作相關(guān)信息，主要包含type屬性和payload屬性：
Reducer：定義應(yīng)用狀態(tài)如何響應(yīng)不同動(dòng)作（action），如何更新狀態(tài)；
Store：管理action和reducer及其關(guān)系的對(duì)象，主要提供以下功能：
1>. 維護(hù)應(yīng)用狀態(tài)并支持讀取訪問狀態(tài)（getState()）；
2>. 支持監(jiān)聽action的分發(fā)，更新狀態(tài)（dispatch(action)）；
3>. 支持訂閱store的變更（subscribe(listener)）；
4>. 支持通過中間件（redux-thunk、redux-saga、redux-promise等）處理異步任務(wù)流程
2. Mobx是一個(gè)透明函數(shù)響應(yīng)式編程的狀態(tài)管理庫(kù)，它使得狀態(tài)管理簡(jiǎn)單可伸縮，它的關(guān)注點(diǎn)在于：
Action：定義改變狀態(tài)的動(dòng)作函數(shù)，包括如何變更狀態(tài)；
Store：集中管理模塊狀態(tài)（State）和動(dòng)作（action）；
Derivation（衍生）：從應(yīng)用狀態(tài)中派生而出，且沒有任何其他影響的數(shù)據(jù)，我們稱為derivation（衍生），衍生在以下情況下存在：
1>. 用戶界面；
2>. 衍生數(shù)據(jù), 衍生主要有兩種：
Computed Values（計(jì)算值）：計(jì)算值總是可以使用純函數(shù)（pure function）從當(dāng)前可觀察狀態(tài)中獲?。? Reactions（反應(yīng)）：反應(yīng)指狀態(tài)變更時(shí)需要自動(dòng)發(fā)生的副作用，這種需要實(shí)現(xiàn)其讀寫操作；
三. 設(shè)計(jì)思想的不同
Redux 更多的是遵循函數(shù)式編程思想 Mobx 設(shè)計(jì)更多偏向于面向?qū)ο缶幊毯晚憫?yīng)式編程，通常將狀態(tài)包裝成可觀察對(duì)象，一旦狀態(tài)對(duì)象變更，就能自動(dòng)獲得更新。
四. 對(duì)store管理的不同
Redux將所有共享的數(shù)據(jù)集中在一個(gè)大的store中，統(tǒng)一管理 Mobx是按模塊將狀態(tài)劃分出多個(gè)獨(dú)立的store進(jìn)行管理
五. 數(shù)據(jù)可變性的不同
Redux強(qiáng)調(diào)的是對(duì)象的不可變性，不能直接操作狀態(tài)對(duì)象，而是在原來(lái)狀態(tài)對(duì)象的基礎(chǔ)上返回一個(gè)新的狀態(tài)對(duì)象，最后返回應(yīng)用的上一狀態(tài) Mobx中可以直接使用新值更新狀態(tài)對(duì)象
六. 學(xué)習(xí)成本方面
Redux 較繁瑣，流程較多，需要配置，創(chuàng)建store，編寫reducer，action，如果涉及異步任務(wù)，還需要引入中間件 Mobx 流程相對(duì)就簡(jiǎn)單很多，根據(jù)文檔上手也比較快
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100472.html
摘要：版版版是一個(gè)基于編寫，使用豆瓣開源開發(fā)的一個(gè)項(xiàng)目。提示左右豆瓣把開源關(guān)了，現(xiàn)在使用的別的開發(fā)者的地址，項(xiàng)目是抽出來(lái)的后期可以自己改，現(xiàn)在項(xiàng)目使用的是，可以正常運(yùn)行。React版Mung React-Native版Mung Flutter版Mung Mung-Flutter 1. Mung-Flutter：是一個(gè)基于Flutter編寫，使用豆瓣開源API開發(fā)的一個(gè)項(xiàng)目。 showImg(ht...
摘要：要求通過要求數(shù)據(jù)變更函數(shù)使用裝飾或放在函數(shù)中，目的就是讓狀態(tài)的變更根據(jù)可預(yù)測(cè)性單向數(shù)據(jù)流。同一份數(shù)據(jù)需要響應(yīng)到多個(gè)視圖，且被多個(gè)視圖進(jìn)行變更需要維護(hù)全局狀態(tài)，并在他們變動(dòng)時(shí)響應(yīng)到視圖數(shù)據(jù)流變得復(fù)雜，組件本身已經(jīng)無(wú)法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態(tài)管理的相關(guān)方案。 前幾篇文章在掘金首發(fā)基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長(zhǎng)了？掘金值太低了？ ...
摘要：關(guān)心性能的情況下，需要手動(dòng)設(shè)置這時(shí)就需要引入狀態(tài)管理庫(kù)?，F(xiàn)在常用的狀態(tài)管理庫(kù)有和，本文會(huì)重點(diǎn)介紹，然后會(huì)將和進(jìn)行對(duì)比，最后展望下未來(lái)的狀態(tài)管理方面趨勢(shì)。如果在任何地方都修改可觀察數(shù)據(jù)，將導(dǎo)致頁(yè)面狀態(tài)難以管理。 React 是一個(gè)專注于視圖層的庫(kù)。React 維護(hù)了狀態(tài)到視圖的映射關(guān)系，開發(fā)者只需關(guān)心狀態(tài)即可，由 React 來(lái)操控視圖。 在小型應(yīng)用中，單獨(dú)使用 React 是沒什么問題...
閱讀 2525·2021-09-30 09:47
閱讀 1460·2021-09-28 09:35
閱讀 3405·2021-09-22 15:57
閱讀 2630·2021-09-22 14:59
閱讀 3739·2021-09-07 10:25
閱讀 3221·2021-09-03 10:48
閱讀 3134·2021-08-26 14:14
閱讀 1048·2019-08-30 15:55
