redux和react有啥差別

redux和react的差異有：1、redux是一個JavaScript狀態容器，而react是Facebook推出的一個用來建構使用者介面的JavaScript函式庫；2、redux主要提供狀態管理，而react主要用於建構UI等等。

本教學操作環境：windows7系統、React17版，DELL G3電腦，此方法適用於所有品牌電腦。

推薦：《javascript基礎教學#》

#redux

redux是一個JavaScript狀態容器，主要提供狀態管理。可以運行於服務端，客戶端，原生應用程式。除了支援React外還支援其他的UI框架，體積小，只有2kb。當要與React一起使用的時候，可以使用react-redux插件來進一步提升我們的開發體驗。

可以透過呼叫對應的API或是以對應的機制改變這個容器中的資料就可以了，其他元件可以透過主動重新從容器中取得新資料來重新渲染。

此外這個容器還需支援發布訂閱機制，也就是當某個資料改變了，關心這個資料的元件就產即會得到通知。

react

react是 Facebook 推出的一個用來建立使用者介面的 JavaScript 函式庫。 React主要用於建立UI，許多人認為 React 是 MVC 中的 V（視圖）。 React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人開始關注和使用它。

React 是一個為資料提供渲染為 HTML 視圖的開源 JavaScript 函式庫。 React 視圖通常採用包含以自訂 HTML 標記規定的其他元件的元件渲染。 React 為程式設計師提供了一個子元件不能直接影響外層元件的模型，資料改變時對 HTML 文件的有效更新，和現代單頁應用程式中元件之間乾淨的分離。

學會用自己的思想來理解React和Redux；不能光聽別人描述名詞，理解起來是很困難的。

從需求出發，看看使用React需要什麼：

1、React有props和state: props意味著父級分發下來的屬性，state意味著元件內部可以自行管理的狀態，整個React沒有資料向上回溯的能力，也就是說資料只能單向向下分發，或是自行內部消化。

理解這個是理解React和Redux的前提。

2、一般建置的React元件內部可能是一個完整的應用，它自己運作良好，你可以透過屬性作為API控制它。但更多的時候發現React根本無法讓兩個元件互相交流，使用對方的資料。

然後這時候不透過DOM溝通（也就是React體制內）解決的唯一方法就是提升state，將state放到共有的父元件中來管理，再作為props分發回子元件。

3、子元件改變父元件state的辦法只能是透過onClick觸發父元件宣告好的回調，也就是父元件提前宣告好函數或方法作為契約描述自己的state會如何變化，再將它同樣作為屬性交給子組件使用。

這樣就出現了一個模式：資料總是單向從頂層向下分發的，但是只有子元件回呼在概念上可以回到state頂層影響資料。這樣state一定程度上是響應式的。

4、為了面對所有可能的擴充問題，最容易想到的辦法就是把所有state集中放到所有元件頂層，然後分發給所有元件。

5. 為了有更好的state管理，需要一個函式庫來作為更專業的頂層state分發給所有React應用，這就是Redux。讓我們回來看看重現`上面結構的需求：

需要回呼通知state (等同於回呼參數) -> action

需要根據回呼處理(等同於父級方法) -> reducer

需要state (等同於總狀態) -> store

#對Redux來說只有這三個要素：

#action是純粹聲明式的資料結構，只提供事件的所有要素，不提供邏輯。

reducer是一個匹配函數，action的發送是全局的：所有的reducer都可以捕捉到並匹配與自己相關與否，相關就拿走action中的要素進行邏輯處理，修改store中的狀態，不相關就不對state做處理原樣回傳。

store負責儲存狀態並且可以被react api回調，發布action.

當然一般不會直接把兩個函式庫拿來用，還有一個binding叫react-redux, 提供一個Provider和connect。很多人其實看懂了redux卡在這裡。

Provider是一個普通元件，可以作為頂層app的分發點，它只需要store屬性就可以了。它會將state分發給所有被connect的元件，不管它在哪裡，嵌套多少層。

connect是真正的重點，它是一個科里化函數，意思是先接受兩個參數（資料綁定mapStateToProps和事件綁定mapDispatchToProps），再接受一個參數（將要綁定的元件本身）：

mapStateToProps：建構好Redux系統的時候，它會被自動初始化，但是你的React元件並不知道它的存在，因此你需要分類出你需要的Redux狀態，所以你需要綁定一個函數，它的參數是state，簡單回傳你關心的幾個值。

mapDispatchToProps：宣告好的action當作回呼，也可以被注入到元件裡，就是透過這個函數，它的參數是dispatch，透過redux的輔助方法bindActionCreator綁定所有action以及參數的dispatch，就可以作為屬性在元件裡面作為函數簡單使用了，不需要手動dispatch。這個mapDispatchToProps是可選的，如果不傳這個參數redux會簡單把dispatch當作屬性注入給元件，可以手動當做store.dispatch使用。

這也是為什麼要科里化的原因。

做好以上流程Redux和React就可以工作了。

簡單來說就是：

1.頂層分發狀態，讓React元件被動地渲染。

2.監聽事件，事件有權利回到所有狀態頂層影響狀態。

總結：

react需要一個管理狀態的管理者，redux就扮演這個角色進行頂層分發狀態，改變react元件的渲染。

以上是redux和react有啥差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！