這次帶給大家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
其實我們只是想找個地方存放一些共享資料而已，大家都可以取得到，也都可以進行修改，僅此而已。那放在一個全部變數裡面行不行？行，當然行，但是太不優雅，也不安全，因為是全域變數嘛，誰都能存取、誰都能修改，有可能一不小心被哪個小夥伴覆蓋了也說不定。那全域變數不行就用私有變數唄，私有變數、無法輕易修改，是不是立刻就想到閉包了...
現在要寫這樣一個函數，其滿足：
存放一個資料物件
外界能存取這個資料
外界也能修改這個資料
當資料有變化的時候，通知訂閱者
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的其他参数等，可以去看一下对应的源码。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
antd下拉框联动使用步骤详解
如何使用JS实现合并多个数组去重算
以上是react、redux、react-redux使用案例對比詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
