redux和react的區(qū)別是什么

這篇文章主要介紹了redux和react的區(qū)別是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

redux和react的區(qū)別有：1、redux是一個(gè)JavaScript狀態(tài)容器，而react是Facebook推出的一個(gè)用來(lái)構(gòu)建用戶界面的JavaScript庫(kù)；2、redux主要提供狀態(tài)管理，而react主要用于構(gòu)建UI等等。

區(qū)別

redux

redux是一個(gè)JavaScript狀態(tài)容器，主要提供狀態(tài)管理。可以運(yùn)行于服務(wù)端，客戶端，原生應(yīng)用。除了支持React外還支持其他的UI框架，體積小，只有2kb。當(dāng)要與React一起使用的時(shí)候，可以使用react-redux插件來(lái)進(jìn)一步提升我們的開(kāi)發(fā)體驗(yàn)。

可以通過(guò)調(diào)用相應(yīng)的API或者是以相應(yīng)的機(jī)制改變這個(gè)容器中的數(shù)據(jù)就可以了，其他組件可以通過(guò)主動(dòng)重新從容器中獲取新數(shù)據(jù)來(lái)重新進(jìn)行渲染。

此外這個(gè)容器還需支持發(fā)布訂閱機(jī)制，即當(dāng)某個(gè)數(shù)據(jù)改變了，關(guān)心這個(gè)數(shù)據(jù)的組件就產(chǎn)即會(huì)得到通知。

react

react是 Facebook 推出的一個(gè)用來(lái)構(gòu)建用戶界面的 JavaScript 庫(kù)。 React主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。React 擁有較高的性能，代碼邏輯非常簡(jiǎn)單，越來(lái)越多的人已開(kāi)始關(guān)注和使用它。

React 是一個(gè)為數(shù)據(jù)提供渲染為 HTML 視圖的開(kāi)源 JavaScript 庫(kù)。React 視圖通常采用包含以自定義 HTML 標(biāo)記規(guī)定的其他組件的組件渲染。React 為程序員提供了一種子組件不能直接影響外層組件的模型，數(shù)據(jù)改變時(shí)對(duì) HTML 文檔的有效更新，和現(xiàn)代單頁(yè)應(yīng)用中組件之間干凈的分離。

學(xué)會(huì)用自己的思想來(lái)理解React和Redux；不能光聽(tīng)別人描述名詞，理解起來(lái)是很困難的。

從需求出發(fā)，看看使用React需要什么：

1、React有props和state: props意味著父級(jí)分發(fā)下來(lái)的屬性，state意味著組件內(nèi)部可以自行管理的狀態(tài)，并且整個(gè)React沒(méi)有數(shù)據(jù)向上回溯的能力，也就是說(shuō)數(shù)據(jù)只能單向向下分發(fā)，或者自行內(nèi)部消化。

理解這個(gè)是理解React和Redux的前提。

2、一般構(gòu)建的React組件內(nèi)部可能是一個(gè)完整的應(yīng)用，它自己工作良好，你可以通過(guò)屬性作為API控制它。但是更多的時(shí)候發(fā)現(xiàn)React根本無(wú)法讓兩個(gè)組件互相交流，使用對(duì)方的數(shù)據(jù)。

然后這時(shí)候不通過(guò)DOM溝通（也就是React體制內(nèi)）解決的唯一辦法就是提升state，將state放到共有的父組件中來(lái)管理，再作為props分發(fā)回子組件。

3、子組件改變父組件state的辦法只能是通過(guò)onClick觸發(fā)父組件聲明好的回調(diào)，也就是父組件提前聲明好函數(shù)或方法作為契約描述自己的state將如何變化，再將它同樣作為屬性交給子組件使用。

這樣就出現(xiàn)了一個(gè)模式：數(shù)據(jù)總是單向從頂層向下分發(fā)的，但是只有子組件回調(diào)在概念上可以回到state頂層影響數(shù)據(jù)。這樣state一定程度上是響應(yīng)式的。

4、為了面臨所有可能的擴(kuò)展問(wèn)題，最容易想到的辦法就是把所有state集中放到所有組件頂層，然后分發(fā)給所有組件。

5. 為了有更好的state管理，就需要一個(gè)庫(kù)來(lái)作為更專業(yè)的頂層state分發(fā)給所有React應(yīng)用，這就是Redux。讓我們回來(lái)看看重現(xiàn)`上面結(jié)構(gòu)的需求：

需要回調(diào)通知state (等同于回調(diào)參數(shù)) -> action

需要根據(jù)回調(diào)處理 (等同于父級(jí)方法) -> reducer

需要state (等同于總狀態(tài)) -> store

對(duì)Redux來(lái)說(shuō)只有這三個(gè)要素：

action是純聲明式的數(shù)據(jù)結(jié)構(gòu)，只提供事件的所有要素，不提供邏輯。

reducer是一個(gè)匹配函數(shù)，action的發(fā)送是全局的：所有的reducer都可以捕捉到并匹配與自己相關(guān)與否，相關(guān)就拿走action中的要素進(jìn)行邏輯處理，修改store中的狀態(tài)，不相關(guān)就不對(duì)state做處理原樣返回。

store負(fù)責(zé)存儲(chǔ)狀態(tài)并可以被react api回調(diào)，發(fā)布action.

當(dāng)然一般不會(huì)直接把兩個(gè)庫(kù)拿來(lái)用，還有一個(gè)binding叫react-redux, 提供一個(gè)Provider和connect。很多人其實(shí)看懂了redux卡在這里。

Provider是一個(gè)普通組件，可以作為頂層app的分發(fā)點(diǎn)，它只需要store屬性就可以了。它會(huì)將state分發(fā)給所有被connect的組件，不管它在哪里，被嵌套多少層。

connect是真正的重點(diǎn)，它是一個(gè)科里化函數(shù)，意思是先接受兩個(gè)參數(shù)（數(shù)據(jù)綁定mapStateToProps和事件綁定mapDispatchToProps），再接受一個(gè)參數(shù)（將要綁定的組件本身）：

mapStateToProps：構(gòu)建好Redux系統(tǒng)的時(shí)候，它會(huì)被自動(dòng)初始化，但是你的React組件并不知道它的存在，因此你需要分揀出你需要的Redux狀態(tài)，所以你需要綁定一個(gè)函數(shù)，它的參數(shù)是state，簡(jiǎn)單返回你關(guān)心的幾個(gè)值。

mapDispatchToProps：聲明好的action作為回調(diào)，也可以被注入到組件里，就是通過(guò)這個(gè)函數(shù)，它的參數(shù)是dispatch，通過(guò)redux的輔助方法bindActionCreator綁定所有action以及參數(shù)的dispatch，就可以作為屬性在組件里面作為函數(shù)簡(jiǎn)單使用了，不需要手動(dòng)dispatch。這個(gè)mapDispatchToProps是可選的，如果不傳這個(gè)參數(shù)redux會(huì)簡(jiǎn)單把dispatch作為屬性注入給組件，可以手動(dòng)當(dāng)做store.dispatch使用。

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

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

簡(jiǎn)單地說(shuō)就是：

1.頂層分發(fā)狀態(tài)，讓React組件被動(dòng)地渲染。

2.監(jiān)聽(tīng)事件，事件有權(quán)利回到所有狀態(tài)頂層影響狀態(tài)。

總結(jié)：

react需要一個(gè)管理狀態(tài)的管理者，redux就充當(dāng)這個(gè)角色進(jìn)行頂層分發(fā)狀態(tài)，改變r(jià)eact組件的渲染。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享redux和react的區(qū)別是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!