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

資訊專欄INFORMATION COLUMN

React-redux基礎(chǔ)

jsyzchen / 1481人閱讀

摘要：簡介創(chuàng)建的函數(shù)，返回一個對象，包含等方法合并多個中間件處理，在實際的前調(diào)用一系列中間件，類似于綁定和函數(shù)式編程中常見的方法，介紹官方提供的綁定庫。

前言

在學(xué)習(xí)了React之后， 緊跟著而來的就是Redux了~

在系統(tǒng)性的學(xué)習(xí)一個東西的時候， 了解其背景、設(shè)計以及解決了什么問題都是非常必要的。
接下來記錄的是， 我個人在學(xué)習(xí)Redux時的一些雜七雜八~

Redux是什么 通俗理解

https://www.zhihu.com/questio...

介紹

先從官方的一句介紹看起：

Redux is a predictable state container for JavaScript apps. （Redux是Javascript應(yīng)用程序的可預(yù)測狀態(tài)容器。）

當(dāng)然，假如你在這之前并沒有接觸過相關(guān)的狀態(tài)管理庫或者框架， 看到這句話時是非常的懵逼的， 不過可以帶著這句話來一步步探索~

背景 
隨著Javascript單頁面應(yīng)用開發(fā)日趨復(fù)雜，JavaScript 需要管理比任何時候都要多的 state （狀態(tài)）。 這些 state 可能包括服務(wù)器響應(yīng)、緩存數(shù)據(jù)、本地生成尚未持久化到服務(wù)器的數(shù)據(jù)，也包括 UI 狀態(tài)，如激活的路由，被選中的標(biāo)簽，是否顯示加載動效或者分頁器等等。管理不斷變化的 state 非常困難。如果一個 model 的變化會引起另一個 model 變化，那么當(dāng) view 變化時，就可能引起對應(yīng) model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發(fā)生了什么。 -- Redux文檔

上面這一大段引用概況起來就是一句話， state（狀態(tài)）在什么時候什么地方，因為什么而變化成了一個不受控制的過程。（這不能忍，狀態(tài)如果無法預(yù)測以及控制）

那么Redux就是試圖讓state的變化變得可預(yù)測。這些限制條件反映在 Redux 的三大原則中。

核心概念

1.Redux使用普通的對象來描述state，這個對象就是Modal。

2.要想更新 state 中的數(shù)據(jù)，你需要發(fā)起一個 action。Action 就是一個普通 JavaScript 對象用來描述發(fā)生了什么。

3.為了把 action 和 state 串起來，開發(fā)一些函數(shù)，這就是 reducer。reducer 只是一個接收 state 和 action，并返回新的 state 的函數(shù)。

三大準(zhǔn)則

只有一個state樹。

state是只讀的，只能通過action改變。

reducer是純函數(shù)，沒有副作用。

了解到這些后，其實已經(jīng)多少能明白Redux is a predictable state container for JavaScript apps. （Redux是Javascript應(yīng)用程序的可預(yù)測狀態(tài)容器。）這句話，為什么是可預(yù)測的？ 因為只有一個state樹，并且它是只讀的，而且只能通過action來改變（改變的過程變得清晰可追蹤），并且獲取state（狀態(tài)）只能通過reducer，而reducer是一個純函數(shù)（此處了解state是重點），沒有副作用，也就意味著我們能知道我們最終得到的state是什么樣的。

api簡介

[createStore(reducer, [preloadedState], [enhancer])](https://www.redux.org.cn/docs...
創(chuàng)建store的函數(shù)，返回一個對象， 包含getStatedispatchsubscribegetReducerreplaceReducer等方法

combineReducers(reducers)
合并多個reducer

applyMiddleware(...middlewares)
中間件處理，在 實際的dispatch前調(diào)用一系列中間件， 類似于koa

bindActionCreators(actionCreators, dispatch)
綁定action和dispatch

compose(...functions)
函數(shù)式編程中常見的方法， compose(funcA, funcB, funcC) => compose(funcA(funcB(funcC())))

React-redux 介紹

Redux官方提供的 React 綁定庫。 具有高效且靈活的特性。

動機

React是以組件化的形式開發(fā)。為了組件的復(fù)用以及代碼的清晰，通常我們將組件分為容器組件以及UI組件。

關(guān)于容器組件和UI組件，推薦閱讀該文章，而引入了React-redux可以很好的幫助我們分離容器組件和UI組件。

為什么選擇react-redux

react-redux是官方提供的綁定庫，由redux開發(fā)者維護，可以很好的與redux保持同步。

它鼓勵組件分離。react-redux協(xié)助我們分離容器組件和UI組件，通過提供API連接store（提供數(shù)據(jù)）和UI組件，并且使得UI組件不需要知道存在Redux（復(fù)用）。

性能優(yōu)化。雖然React速度很快，但是re-redering是非常消耗性能的，而react-redux的內(nèi)部做了許多性能優(yōu)化。

社區(qū)支持，因為是官方指定的綁定庫，所以擁有大量的使用者，社區(qū)活躍度高，問題也容易解決。

api簡介

使組件層級中的 connect() 方法都能夠獲得 Redux store。
store: 應(yīng)用程序中唯一的 Redux store 對象

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)

mapStateToProps(state, [ownProps]): stateProps: 映射state作為UI組件的props

mapDispatchToProps(dispatch, [ownProps]): dispatchProps： 映射dispatch作為UI組件的props

mergeProps(stateProps, dispatchProps, ownProps): props: 如果指定這個函數(shù)， 即合并mapStateToPropsmapDIspatchToPropsoweProps作為UI組件的props

options: 定制 connector 的行為

Redux存在的問題

與其說缺點，不如說是Redux的優(yōu)勢而造成的不可避免的劣勢，問題應(yīng)該辯證地看~

純凈。Redux只支持同步，讓狀態(tài)可預(yù)測，方便測試。 但不處理異步、副作用的情況，而把這個丟給了其他中間件，諸如redux-thunkredux-promiseredux-saga等等，選擇多也容易造成混亂~

啰嗦。那么寫過Redux的人，都知道actionreducer以及你的業(yè)務(wù)代碼非常啰嗦，模板代碼非常多。但是~，這也是為了讓數(shù)據(jù)的流動清晰明了。

性能。粗暴地、級聯(lián)式刷新視圖（使用react-redux優(yōu)化)。

分型。原生 Redux-react 沒有分形結(jié)構(gòu)，中心化 store；

Redux的最佳實踐 vuex（dva）

事實上，如果用過vuex或者dva的話， 個人覺得還是會比較偏向于這種用法。比起Redux的啰嗦，dva幫忙簡化了很多步驟。具體的實現(xiàn)后續(xù)補充~

這里先補充一點，vuex不是immutable，所以對于時間旅行這種業(yè)務(wù)不太友好。

Redux的實現(xiàn)淺析 前言

Redux的代碼相對比較簡單，容易理解， 源碼的解讀推薦看這篇文章， 本段主要是對代碼里一些個人覺得比較有意思的點進(jìn)行分析~

createStore

在這里看出，redux即使是在內(nèi)部，也是函數(shù)式編程~
當(dāng)我們傳入了一個enhancer函數(shù)（即中間件），會把createStore本身當(dāng)成參數(shù)傳給enhancer然后返回一個新的函數(shù)來調(diào)用 即 fn => fn

暴露出的subscribe函數(shù)也是挺有意思的， 首先是isSubscribed這個變量， 其實就是一種非?；A(chǔ)的閉包使用，

　　然后是每次訂閱或者取消訂閱的時候，都會在dispatch之前保存一次快照， 然后當(dāng)前的dispatch用的是上一份快照，而下一個dispatch則是使用當(dāng)前這一份的快照
　　

compose

非常簡潔的寫出了函數(shù)式編程的一個常用函數(shù)(...args) => f(g(h(...args))).

combineReducer

可以看出，每一次action都會重新計算所有的reducer~ 但如果不是非常巨大的state樹，并且拆分了很多模塊，個人認(rèn)為其實影響不大

bindActionCreator和applyMiddleware相對容易理解， 這里就不贅述啦

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

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

相關(guān)文章

  • React-Redux 中文文檔

    摘要：介紹快速開始是的官方綁定庫。通常你可以以下面這種方式調(diào)用方法基礎(chǔ)教程為了進(jìn)一步了解如何實際使用，我們將一步一步創(chuàng)建一個一個實例跳轉(zhuǎn)到 介紹 快速開始 React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以更新數(shù)據(jù) 安裝 在你的React app中使用React-Redux： npm i...

    MobService 評論0 收藏0

  • 手挽手帶你學(xué)React：四檔（下篇）一步一步學(xué)會react-redux

    摘要：手挽手帶你學(xué)入門四檔用人話教你，理解架構(gòu)，以及運用在中。學(xué)完這一章，你就可以開始自己的項目了。結(jié)合搭建基礎(chǔ)環(huán)境我們上一章講過了的原理，內(nèi)部是有一個的，只有才可以控制它變化。 手挽手帶你學(xué)React入門四檔,用人話教你react-redux，理解redux架構(gòu)，以及運用在react中。學(xué)完這一章，你就可以開始自己的react項目了。 視頻教程 上一篇我們自己實現(xiàn)了Redux，這一篇我們來...

    FullStackDeveloper 評論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-redux 開發(fā)實踐與學(xué)習(xí)分享

    摘要：簡介是一個狀態(tài)管理的庫，由基礎(chǔ)上開發(fā)出來，與的主要區(qū)別是只有一個，關(guān)于，后文會詳述。這個函數(shù)接受四個參數(shù)，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關(guān)條件，則觸發(fā)的行為。具體定義了項目中觸發(fā)的行為類別，通過屬性來區(qū)別于不同的行為。 redux簡介 redux是一個js狀態(tài)管理的庫，由flux基礎(chǔ)上開發(fā)出來，與flux的主要區(qū)別是只有一個store，關(guān)于store，后文會詳述。在各...

    imccl 評論0 收藏0

  • react+react-router+react-redux全家桶小項目開發(fā)過程分享

    摘要：項目地址下載完項目然后即可基于的項目，主要是為了學(xué)習(xí)實戰(zhàn)。數(shù)據(jù)都是固定的，從餓了么接口臨時抓的，模擬了一個的異步數(shù)據(jù)延遲，感謝餓了么。詳細(xì)信息可以看上面的官方文檔，我這里就簡單說一下我這個項目的應(yīng)用。 react-ele-webapp 項目地址 ：https://github.com/kliuj/reac... run 下載完項目npm install然后npm run dev 即可 ...

    zzir 評論0 收藏0

發(fā)表評論

0條評論

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