欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解react、redux、react-redux之間的關(guān)系

 更新時(shí)間:2018年04月11日 10:25:27   作者:無名小貝勒  
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了react、redux、react-redux之間的關(guān)系,分享給大家,也給自己留個(gè)筆記,具體如下:

React

一些小型項(xiàng)目,只使用 React 完全夠用了,數(shù)據(jù)管理使用props、state即可,那什么時(shí)候需要引入Redux呢? 當(dāng)渲染一個(gè)組件的數(shù)據(jù)是通過props從父組件中獲取時(shí),通常情況下是 A --> B,但隨著業(yè)務(wù)復(fù)雜度的增加,有可能是這樣的:A --> B --> C --> D --> E,E需要的數(shù)據(jù)需要從A那里通過props傳遞過來,以及對(duì)應(yīng)的 E --> A逆向傳遞callback。組件BCD是不需要這些數(shù)據(jù)的,但是又必須經(jīng)由它們來傳遞,這確實(shí)有點(diǎn)不爽,而且傳遞的props以及callback對(duì)BCD組件的復(fù)用也會(huì)造成影響?;蛘咝值芙M件之間想要共享某些數(shù)據(jù),也不是很方便傳遞、獲取等。諸如此類的情況,就有必要引入Redux了。

其實(shí) A --> B --> C --> D --> E 這種情況,React不使用props層層傳遞也是能拿到數(shù)據(jù)的,使用Context即可。后面要講到的react-redux就是通過Context讓各個(gè)子組件拿到store中的數(shù)據(jù)的。

Redux

其實(shí)我們只是想找個(gè)地方存放一些共享數(shù)據(jù)而已,大家都可以獲取到,也都可以進(jìn)行修改,僅此而已。 那放在一個(gè)全部變量里面行不行?行,當(dāng)然行,但是太不優(yōu)雅,也不安全,因?yàn)槭侨肿兞柯铮l都能訪問、誰都能修改,有可能一不小心被哪個(gè)小伙伴覆蓋了也說不定。那全局變量不行就用私有變量唄,私有變量、不能輕易被修改,是不是立馬就想到閉包了...

現(xiàn)在要寫這樣一個(gè)函數(shù),其滿足:

  1. 存放一個(gè)數(shù)據(jù)對(duì)象
  2. 外界能訪問到這個(gè)數(shù)據(jù)
  3. 外界也能修改這個(gè)數(shù)據(jù)
  4. 當(dāng)數(shù)據(jù)有變化的時(shí)候,通知訂閱者
function createStore(reducer, initialState) {
 // currentState就是那個(gè)數(shù)據(jù)
 let currentState = initialState;
 let listener = () => {};

 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新數(shù)據(jù)
 listener(); // 執(zhí)行訂閱函數(shù)
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消訂閱函數(shù)
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}

const store = createStore(reducer);
store.getState(); // 獲取數(shù)據(jù)
store.dispatch({type: 'ADD_TODO'}); // 更新數(shù)據(jù)
store.subscribe(() => {/* update UI */}); // 注冊(cè)訂閱函數(shù)

更新數(shù)據(jù)執(zhí)行的步驟:

  1. What:想干什么 --- dispatch(action)
  2. How:怎么干,干的結(jié)果 --- reducer(oldState, action) => newState
  3. Then?:重新執(zhí)行訂閱函數(shù)(比如重新渲染UI等)

這樣就實(shí)現(xiàn)了一個(gè)store,提供一個(gè)數(shù)據(jù)存儲(chǔ)中心,可以供外部訪問、修改等,這就是Redux的主要思想。 所以,Redux確實(shí)和React沒有什么本質(zhì)關(guān)系,Redux可以結(jié)合其他庫正常使用。只不過Redux這種數(shù)據(jù)管理方式,跟React的數(shù)據(jù)驅(qū)動(dòng)視圖理念很合拍,它倆結(jié)合在一起,開發(fā)非常便利。

現(xiàn)在既然有了一個(gè)安全的地方存取數(shù)據(jù),怎么結(jié)合到React里面呢? 我們可以在應(yīng)用初始化的時(shí)候,創(chuàng)建一個(gè)window.store = createStore(reducer),然后在需要的地方通過store.getState()去獲取數(shù)據(jù),通過store.dispatch去更新數(shù)據(jù),通過store.subscribe去訂閱數(shù)據(jù)變化然后進(jìn)行setState...如果很多地方都這樣做一遍,實(shí)在是不堪其重,而且,還是沒有避免掉全局變量的不優(yōu)雅。

React-Redux

由于全局變量有諸多的缺點(diǎn),那就換個(gè)思路,把store直接集成到React應(yīng)用的頂層props里面,只要各個(gè)子組件能訪問到頂層props就行了,比如這樣:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React恰好提供了這么一個(gè)鉤子,Context,用法很簡(jiǎn)單,看一下官方demo就明了?,F(xiàn)在各個(gè)子組件已經(jīng)能夠輕易地訪問到store了,接下來就是子組件把store中用到的數(shù)據(jù)取出來、修改、以及訂閱更新UI等。每個(gè)子組件都需要這樣做一遍,顯然,肯定有更便利的方法:高階組件。通過高階組件把store.getState()、store.dispatch、store.subscribe封裝起來,子組件對(duì)store就無感知了,子組件正常使用props獲取數(shù)據(jù)以及正常使用callback觸發(fā)回調(diào),相當(dāng)于沒有store存在一樣。

下面是這個(gè)高階組件的大致實(shí)現(xiàn):

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 組件加載完成后訂閱store變化,如果store有變化則更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 組件銷毀后,取消訂閱事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 參數(shù)是store里面的數(shù)據(jù)
   {...mapDispatchToProps(this.context.store.dispatch)} // 參數(shù)是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}

使用connect的時(shí)候,我們知道要寫一些樣板化的代碼,比如mapStateToProps、mapDispatchToProps這兩個(gè)函數(shù):

const mapStateToProps = state => {
 return {
 count: state.count
 };
};

const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};

export default connect(mapStateToProps, mapDispatchToProps)(Child);

// 上述代碼執(zhí)行之后,可以看到connect函數(shù)里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />

// 就變成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />

// 這樣,子組件Child的props里面就多了count和dispatch兩個(gè)屬性
// count可以用來渲染UI,dispatch可以用來觸發(fā)回調(diào)

So,這樣就OK了?OK了。 通過一個(gè)閉包生成一個(gè)數(shù)據(jù)中心store,然后把這個(gè)store綁定到React的頂層props里面,子組件通過HOC建立與頂層props.store的聯(lián)系,進(jìn)而獲取數(shù)據(jù)、修改數(shù)據(jù)、更新UI。 這里主要講了一下三者怎么竄在一起的,如果想了解更高級(jí)的功能,比如redux中間件、reducer拆分、connect的其他參數(shù)等,可以去看一下對(duì)應(yīng)的源碼。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • React中的生命周期詳解

    React中的生命周期詳解

    這篇文章主要介紹了React中的生命周期,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-09-09
  • react native圖片解析流程詳解

    react native圖片解析流程詳解

    這篇文章主要為大家介紹了react native圖片解析流程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • react基于react-slick實(shí)現(xiàn)多圖輪播效果

    react基于react-slick實(shí)現(xiàn)多圖輪播效果

    React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • React-Router v6實(shí)現(xiàn)頁面級(jí)按鈕權(quán)限示例詳解

    React-Router v6實(shí)現(xiàn)頁面級(jí)按鈕權(quán)限示例詳解

    這篇文章主要介紹了使用 reac+reactRouter來實(shí)現(xiàn)頁面級(jí)的按鈕權(quán)限功能,這篇文章分三部分,實(shí)現(xiàn)思路、代碼實(shí)現(xiàn)、踩坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2023-10-10
  • React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解

    React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解

    這篇文章主要為大家介紹了React18?useState何時(shí)執(zhí)行更新及微任務(wù)理解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 解析TypeError:import_react_native.AppState.removeEventListener?is?not?a?function

    解析TypeError:import_react_native.AppState.removeEventListener

    這篇文章主要為大家介紹了TypeError:import_react_native.AppState.removeEventListener?is?not?a?function問題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 在React中使用React.createRef:更優(yōu)雅的DOM引用方式

    在React中使用React.createRef:更優(yōu)雅的DOM引用方式

    React提供了多種方式來引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應(yīng)用,以及它為開發(fā)者帶來的便利,感興趣的朋友一起看看吧
    2024-01-01
  • 淺談React底層實(shí)現(xiàn)原理

    淺談React底層實(shí)現(xiàn)原理

    本文主要介紹了淺談React底層實(shí)現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • React如何解決樣式污染問題

    React如何解決樣式污染問題

    這篇文章主要介紹了React如何解決樣式污染問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • react中使用js實(shí)現(xiàn)頁面滾動(dòng)監(jiān)聽(推薦)

    react中使用js實(shí)現(xiàn)頁面滾動(dòng)監(jiān)聽(推薦)

    這篇文章主要介紹了react中使用js實(shí)現(xiàn)頁面滾動(dòng)監(jiān)聽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04

最新評(píng)論