摘要:的學習筆記首先先了解下什么是框架框架視圖用戶界面。創(chuàng)建數(shù)組,保存監(jiān)聽函數(shù)獲取倉庫中當前狀態(tài)只有調用方法才能更新倉庫合并狀態(tài)執(zhí)行監(jiān)聽函數(shù),更新添加監(jiān)聽函數(shù)由于每次執(zhí)行后,都會執(zhí)行所以這一行的作用就是在初始化中所有的節(jié)點。
redux的學習筆記 首先先了解下什么是MVC框架
視圖(View):用戶界面。 => 傳送指令到 Controller
控制器(Controller):業(yè)務邏輯 => 完成業(yè)務邏輯后,要求 Model 改變狀態(tài)
模型(Model):數(shù)據保存 => 將新的數(shù)據發(fā)送到 View,用戶得到反饋
故事的主人公小明,辛苦打拼多年,終于存到了買房的錢,于是就屁顛屁顛的在首都的郊區(qū)買了一套120的毛坯房(當前的房子的state),因為是毛坯房,自然是出了一些基礎設施其他啥也沒有(initState),這問題就來了,這毛坯房也不能住啊 ,這剛買完房也沒多少積蓄了,就想著找裝修公司簡裝下,問了價格之后,小明直接就憑著當年在幼兒園打下的美術基礎畫了一張設計圖,然后就和自己老婆分配了任務,誰該做什么,例如小明粉刷墻,經過多天努力,總算是裝修完成了,此時小明的新房,從一個毛坯房,變成了一個豪華的毛坯房(更新之后的房子的state)
1.首先回顧下這個故事: 小名的毛坯房 --> 畫出裝修圖紙 --> 小明分配任務 --> 小明和自己老婆裝修 --> 豪華毛坯房
2.再來說下Redux里的幾個核心概念,這里我們把React也加進來:
view(React)
store(state)
action
reducer
3.接下來看看Redux/React與這個故事的聯(lián)系:
view(React) = 第一次看到毛坯房
store(state) = 毛坯房空空如也,什么都沒有,只有基礎設施
action = 小明分配任務(誰應該干什么)
reducer = 具體任務都干些什么(小明粉刷墻)
4.所以這個過程應該是這樣的
view ---> action ---> reducer ---> store(state) ---> view
5.如果放入一個web app中,首先store(state)決定了view,然后用戶與view的交互會產生action,這些action會觸發(fā)reducer因而改變state,然后state的改變又造成了view的變化。
redux中主要方法:
createStore
combineReducers
bindActionCreators
applyMiddleWare
compose
原函數(shù)有三個參數(shù),這里只分析第一個參數(shù)reducer
參數(shù):reducerreducer: function類型(而且是純函數(shù)),reducer的作用是,根據指定的action的type,進行處理state,返回新的state
參數(shù):
action: 是一個對象或者函數(shù)(最終返回的也是對象),type是action必須有的屬性,reducer根據action.type處理state
state: 需要在這里初始化state,不然會報錯
因為reducer合并狀態(tài)是覆蓋式,所以需要先解構出當前狀態(tài),再進行處理
dispatch: 分發(fā)action,只能用dispatch修改store中的狀態(tài)
根據action查詢reducer中變state的方法,更新store tree
變更store tree后,依次執(zhí)行listener中所有響應函數(shù)
getState: 獲取倉庫中當前狀態(tài)
subscribe: 注冊監(jiān)聽函數(shù),監(jiān)聽state的變化
store 可以理解為一個全局變量,保存著你項目中所有需要保存的數(shù)據,而這個全局變量加了一把密碼鎖,只有指定的密碼(dispatch({type:AAA}))進行修改,因為你想啊,若是誰都能修改這個全局變量,而在你用這個變量之前,可能執(zhí)行的其他程序已經對這個變量進行了修改,這也是我們平時開發(fā)的時候避免全局變量的原因,所以就要提高修該數(shù)據的權限。
let createStore = (reducer)=>{ var state; let listeners = []; //創(chuàng)建數(shù)組,保存監(jiān)聽函數(shù) let getState = ()=>state; // 獲取倉庫中當前狀態(tài) function dispatch(action){ // 只有調用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 } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.hztianpu.com/yun/90172.html
摘要:應用中唯一的狀態(tài)應用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的,注意到文檔中有這樣的一句話并不會改變它連接的組件,而是提供一個經過包裹的組件。 關于React-redux Redux是React全家桶的重要一員,之前在知乎上也看到類似的提問:該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器,Redux的概念簡單明了: 1. 應用中所有的狀...
摘要:相關配置請參考中文文檔。關于的更多使用方法及理解需要詳細具體講解,涉及篇幅較大,本文暫不涉及,有興趣可以看文檔中文文檔,我會整理后再單獨章節(jié)分享接下來我們將編寫路由組件這與有一些差別,原來的方法已經不再使用,在中或組件從中引入。 ??????相信很多剛入坑React的小伙伴們有一個同樣的疑惑,由于React相關庫不斷的再進行版本迭代,網上很多以前的技術分享變得不再適用。比如react-...
摘要:損失函數(shù)的作用可以理解為當前向傳播得到的預測值與真實值接近時,取較小值。 神經網絡 神經網絡就是一個萬能的模型+誤差修正函數(shù),每次根據訓練得到的結果與預想結果進行誤差分析,進而修改權值和閾值,一步一步得到能輸出和預想結果一致的模型。 舉一個例子:比如某廠商生產一種產品,投放到市場之后得到了消費者的反饋,根據消費者的反饋,廠商對產品進一步升級,優(yōu)化,從而生產出讓消費者更滿意的產品。這就是...
摘要:前言最近發(fā)現(xiàn)很多小伙伴對于線程池的原理不是特別的理解,所以想通過這篇文章來讓大家更好的認識線程池的原理,了解到其是如何工作的講解下面我會將線程池比作一個公司的一個部門,介紹線程池如何工作的,同時介紹其中的一些關鍵組件和參數(shù)。 前言 最近發(fā)現(xiàn)很多小伙伴對于Java線程池ThreadPoolExecutor的原理不是特別的理解,所以想通過這篇文章來讓大家更好的認識線程池的原理,了解到其是如...
閱讀 1916·2023-04-26 02:51
閱讀 2969·2021-09-10 10:50
閱讀 3237·2021-09-01 10:48
閱讀 3758·2019-08-30 15:53
閱讀 1917·2019-08-29 18:40
閱讀 472·2019-08-29 16:16
閱讀 2103·2019-08-29 13:21
閱讀 1876·2019-08-29 11:07