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

資訊專欄INFORMATION COLUMN

如何通俗易懂的理解 redux

RaoMeng / 1307人閱讀

摘要：的學(xué)習(xí)筆記首先先了解下什么是框架框架視圖用戶界面。創(chuàng)建數(shù)組，保存監(jiān)聽函數(shù)獲取倉庫中當(dāng)前狀態(tài)只有調(diào)用方法才能更新倉庫合并狀態(tài)執(zhí)行監(jiān)聽函數(shù)，更新添加監(jiān)聽函數(shù)由于每次執(zhí)行后，都會執(zhí)行所以這一行的作用就是在初始化中所有的節(jié)點。

redux的學(xué)習(xí)筆記 首先先了解下什么是MVC框架
MVC框架（Model-View-Controller）
視圖（View）：用戶界面。 => 傳送指令到 Controller


控制器（Controller）：業(yè)務(wù)邏輯 => 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)


模型（Model）：數(shù)據(jù)保存 => 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
來個小故事幫助理解
故事的主人公小明，辛苦打拼多年，終于存到了買房的錢，于是就屁顛屁顛的在首都的郊區(qū)買了一套120的毛坯房（當(dāng)前的房子的state），因為是毛坯房，自然是出了一些基礎(chǔ)設(shè)施其他啥也沒有（initState），這問題就來了，這毛坯房也不能住啊 ，這剛買完房也沒多少積蓄了，就想著找裝修公司簡裝下，問了價格之后，小明直接就憑著當(dāng)年在幼兒園打下的美術(shù)基礎(chǔ)畫了一張設(shè)計圖,然后就和自己老婆分配了任務(wù)，誰該做什么，例如小明粉刷墻，經(jīng)過多天努力，總算是裝修完成了，此時小明的新房，從一個毛坯房，變成了一個豪華的毛坯房（更新之后的房子的state）

1.首先回顧下這個故事： 小名的毛坯房 --> 畫出裝修圖紙 --> 小明分配任務(wù) --> 小明和自己老婆裝修 --> 豪華毛坯房
2.再來說下Redux里的幾個核心概念,這里我們把React也加進(jìn)來：

view(React)

store(state)

action

reducer

3.接下來看看Redux/React與這個故事的聯(lián)系：

view(React) = 第一次看到毛坯房

store(state) = 毛坯房空空如也，什么都沒有，只有基礎(chǔ)設(shè)施

action = 小明分配任務(wù)(誰應(yīng)該干什么)

reducer = 具體任務(wù)都干些什么(小明粉刷墻)

4.所以這個過程應(yīng)該是這樣的
view ---> action ---> reducer ---> store(state) ---> view

5.如果放入一個web app中，首先store(state)決定了view，然后用戶與view的交互會產(chǎn)生action，這些action會觸發(fā)reducer因而改變state，然后state的改變又造成了view的變化。

redux 源碼簡單分析
redux中主要方法:

createStore

combineReducers

bindActionCreators

applyMiddleWare

compose

這里主要分析一下createStore(reducer) 
原函數(shù)有三個參數(shù)，這里只分析第一個參數(shù)reducer
參數(shù):reducer




reducer: function類型（而且是純函數(shù)），reducer的作用是，根據(jù)指定的action的type，進(jìn)行處理state，返回新的state




參數(shù):




action: 是一個對象或者函數(shù)（最終返回的也是對象），type是action必須有的屬性，reducer根據(jù)action.type處理state



state: 需要在這里初始化state，不然會報錯





因為reducer合并狀態(tài)是覆蓋式，所以需要先解構(gòu)出當(dāng)前狀態(tài)，再進(jìn)行處理
store的返回值:返回值是三個方法


dispatch: 分發(fā)action，只能用dispatch修改store中的狀態(tài)



根據(jù)action查詢reducer中變state的方法，更新store tree


變更store tree后，依次執(zhí)行listener中所有響應(yīng)函數(shù)






getState: 獲取倉庫中當(dāng)前狀態(tài)



subscribe: 注冊監(jiān)聽函數(shù)，監(jiān)聽state的變化


store 可以理解為一個全局變量，保存著你項目中所有需要保存的數(shù)據(jù)，而這個全局變量加了一把密碼鎖，只有指定的密碼（dispatch（{type:AAA}））進(jìn)行修改，因為你想啊，若是誰都能修改這個全局變量，而在你用這個變量之前，可能執(zhí)行的其他程序已經(jīng)對這個變量進(jìn)行了修改，這也是我們平時開發(fā)的時候避免全局變量的原因，所以就要提高修該數(shù)據(jù)的權(quán)限。


    let createStore = (reducer)=>{
        var state;
        let listeners = []; 
         //創(chuàng)建數(shù)組，保存監(jiān)聽函數(shù)
    
        let getState = ()=>state;
       // 獲取倉庫中當(dāng)前狀態(tài)
       
        function dispatch(action){
            // 只有調(diào)用dispatch方法才能更新倉庫
            state = reducer(state,action);
            // 合并狀態(tài)
            listeners.forEach(listener=>listener());
            //執(zhí)行監(jiān)聽函數(shù)，更新view
        }
        
        let subscribe = (listener)=>{
        listeners.push(listener);
        // 添加監(jiān)聽函數(shù)
        }
        dispatch({})
        // 由于每次dispatch執(zhí)行后，redux都會執(zhí)行reducer
        //所以這一行的作用就是在初始化store tree中所有的state節(jié)點。
        return {
            getState,
            dispatch,
            subscribe
        }
    }

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

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

相關(guān)文章

  • 前端進(jìn)階資源整理

    摘要：前端進(jìn)階進(jìn)階構(gòu)建項目一配置最佳實踐狀態(tài)管理之痛點分析與改良開發(fā)中所謂狀態(tài)淺析從時間旅行的烏托邦，看狀態(tài)管理的設(shè)計誤區(qū)使用更好地處理數(shù)據(jù)愛彼迎房源詳情頁中的性能優(yōu)化從零開始，在中構(gòu)建時間旅行式調(diào)試用輕松管理復(fù)雜狀態(tài)如何把業(yè)務(wù)邏輯這個故事講好和 前端進(jìn)階 webpack webpack進(jìn)階構(gòu)建項目(一) Webpack 4 配置最佳實踐 react Redux狀態(tài)管理之痛點、分析與...

    BlackMass 評論0 收藏0

  • 對React-redux中connect方法的理解

    摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會改變它連接的組件，而是提供一個經(jīng)過包裹的組件。 關(guān)于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器，Redux的概念簡單明了： 1. 應(yīng)用中所有的狀...

    Bryan 評論0 收藏0

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

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

    weapon 評論0 收藏0

  • 神經(jīng)網(wǎng)絡(luò)中的梯度下降與反向傳播的關(guān)系（大白話，通俗易懂版本）

    摘要：損失函數(shù)的作用可以理解為當(dāng)前向傳播得到的預(yù)測值與真實值接近時，取較小值。 神經(jīng)網(wǎng)絡(luò) 神經(jīng)網(wǎng)絡(luò)就是一個萬能的模型+誤差修正函數(shù)，每次根據(jù)訓(xùn)練得到的結(jié)果與預(yù)想結(jié)果進(jìn)行誤差分析，進(jìn)而修改權(quán)值和閾值，一步一步得到能輸出和預(yù)想結(jié)果一致的模型。 舉一個例子：比如某廠商生產(chǎn)一種產(chǎn)品，投放到市場之后得到了消費者的反饋，根據(jù)消費者的反饋，廠商對產(chǎn)品進(jìn)一步升級，優(yōu)化，從而生產(chǎn)出讓消費者更滿意的產(chǎn)品。這就是...

    鄒立鵬 評論0 收藏0

  • 通俗易懂的Java線程池原理

    摘要：前言最近發(fā)現(xiàn)很多小伙伴對于線程池的原理不是特別的理解，所以想通過這篇文章來讓大家更好的認(rèn)識線程池的原理，了解到其是如何工作的講解下面我會將線程池比作一個公司的一個部門，介紹線程池如何工作的，同時介紹其中的一些關(guān)鍵組件和參數(shù)。 前言 最近發(fā)現(xiàn)很多小伙伴對于Java線程池ThreadPoolExecutor的原理不是特別的理解，所以想通過這篇文章來讓大家更好的認(rèn)識線程池的原理，了解到其是如...

    宋華 評論0 收藏0

發(fā)表評論

0條評論

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