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