react、redux、react-redux三者的關系是什么

這期內容當中小編將會給大家帶來有關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

其實我們只是想找個地方存放一些共享數據而已，大家都可以獲取到，也都可以進行修改，僅此而已。 那放在一個全部變量里面行不行？行，當然行，但是太不優雅，也不安全，因為是全局變量嘛，誰都能訪問、誰都能修改，有可能一不小心被哪個小伙伴覆蓋了也說不定。那全局變量不行就用私有變量唄，私有變量、不能輕易被修改，是不是立馬就想到閉包了...

現在要寫這樣一個函數，其滿足：

1. 存放一個數據對象

2. 外界能訪問到這個數據

3. 外界也能修改這個數據

4. 當數據有變化的時候，通知訂閱者

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 */}); // 注冊訂閱函數

更新數據執行的步驟：

1. What：想干什么 --- dispatch(action)

2. How：怎么干，干的結果 --- reducer(oldState, action) => newState

3. 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可以用來觸發回調

上述就是小編為大家分享的react、redux、react-redux三者的關系是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。