這篇文章帶給大家的內容是關於react、redux和react-redux有什麼關係? ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
React
一些小型項目,只使用React 完全夠用了,資料管理使用props、state即可,那什麼時候需要引入Redux呢?當渲染一個元件的資料是透過props從父元件中取得時,通常情況下是A --> B,但隨著業務複雜度的增加,有可能是這樣的:A --> B -- > C --> D --> E,E需要的資料需要從A那裡透過props傳遞過來,以及對應的E --> A逆向傳遞callback。組件BCD是不需要這些資料的,但是又必須經由它們來傳遞,這確實有點不爽,而且傳遞的props以及callback對BCD組件的複用也會造成影響。或是兄弟組件之間想要分享某些數據,也不是很方便傳遞、取得等。諸如此類的情況,就有必要引進Redux了。
其實A --> B --> C --> D --> E 這種情況,React不使用props層層傳遞也是能拿到資料的,使用Context即可。後面要講到的react-redux就是透過Context讓各個子元件拿到store裡的資料的。
Redux
其實我們只是想找個地方存放一些共享資料而已,大家都可以取得到,也都可以進行修改,僅此而已。那放在一個全部變數裡面行不行?行,當然行,但是太不優雅,也不安全,因為是全域變數嘛,誰都能存取、誰都能修改,有可能一不小心被哪個小夥伴覆蓋了也說不定。那全域變數不行就用私有變數唄,私有變數、無法輕易修改,是不是立刻就想到閉包了...
現在要寫這樣一個函數,其滿足:
存放一個資料對象
外界能存取到這個資料
外界也能修改這個資料
當資料有變化的時候,通知訂閱者
function createStore(reducer, initialState) { // currentState就是那个数据 let currentState = initialState; let listener = () => {}; function getState() { return currentState; } function dispatch(action) { currentState = reducer(currentState, action); // 更新数据 listener(); // 执行订阅函数 return action; } function subscribe(newListener) { listener = newListener; // 取消订阅函数 return function unsubscribe() { listener = () => {}; }; } return { getState, dispatch, subscribe }; } const store = createStore(reducer); store.getState(); // 获取数据 store.dispatch({type: 'ADD_TODO'}); // 更新数据 store.subscribe(() => {/* update UI */}); // 注册订阅函数
更新資料執行的步驟:
What:想做什麼--- dispatch(action)
How:怎麼幹,幹的結果--- reducer(oldState, action) => newState
Then?:重新執行訂閱函數(例如重新渲染UI等)
這樣就實作了一個store,提供一個資料儲存中心,可以供外部存取、修改等,這就是Redux的主要想法。所以,Redux確實和React沒有什麼本質關係,Redux可以結合其他函式庫正常使用。只不過Redux這種資料管理方式,跟React的資料驅動視圖概念很合拍,它兩個結合在一起,開發非常便利。
現在既然有了一個安全的地方可以存取數據,要怎麼結合到React裡面呢?我們可以在應用初始化的時候,創建一個window.store = createStore(reducer),然後在需要的地方通過store.getState()去獲取數據,通過store.dispatch去更新數據,通過store.subscribe去訂閱數據變化然後進行setState...如果很多地方都這樣做一遍,實在是不堪其重,而且,還是沒有避免掉全域變數的不優雅。
React-Redux
由於全域變數有諸多的缺點,那就換個思路,把store直接整合到React應用的頂層props裡面,只要各個子元件能訪問到頂層props就行了,比如這樣:
<TopWrapComponent store={store}> <App /> </TopWrapComponent>,
React剛好提供了這麼一個鉤子,Context,用法很簡單,看一下官方demo就明了。現在各個子元件已經能夠輕易存取到store了,接下來就是子元件把store裡用到的資料取出、修改、以及訂閱更新UI等。每個子組件都需要這樣做一遍,顯然,肯定有更方便的方法:高階組件。透過高階元件把store.getState()、store.dispatch、store.subscribe封裝起來,子元件對store就無感知了,子元件正常使用props取得資料以及正常使用callback觸發回調,相當於沒有store存在一樣。
下面是這個高階元件的大致實作:
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())} // 参数是store里面的数据 {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch /> ); } } Connect.contextTypes = { store: PropTypes.object }; return Connect; }; } 使用connect的时候,我们知道要写一些样板化的代码,比如mapStateToProps、mapDispatchToProps这两个函数: const mapStateToProps = state => { return { count: state.count }; }; const mapDispatchToProps = dispatch => { return { dispatch }; }; export default connect(mapStateToProps, mapDispatchToProps)(Child); // 上述代码执行之后,可以看到connect函数里面的 <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兩個屬性
// count可以用來渲染UI,dispatch可以用來觸發回呼
So,這樣就OK了? OK了。透過一個閉包產生一個資料中心store,然後把這個store綁定到React的頂層props裡面,子元件透過HOC建立與頂層props.store的聯繫,進而取得資料、修改資料、更新UI。這裡主要講了一下三者怎麼竄在一起的,如果想了解更高階的功能,像是redux中間件、reducer分割、connect的其他參數等,可以去看一下對應的源碼。
以上是react、redux和react-redux有什麼關係?的詳細內容。更多資訊請關注PHP中文網其他相關文章!