React原理及其工作流程

levy9527 發布于2019-08-23 15:32 / 1430人閱讀

摘要：再次將子返回的單個進行合并成一個新的完整的。此時發生了變化。如果不相同則調用觸發組件的更新，傳入組件，觸發組件的更新，此時組件獲得新的，的一次流程結束。

react-redux提供了connect和provider兩個好方式，provider將組件和redux關聯起來，將store傳給組件，組件通過dispatch發出action，store根據action的type屬性，調用對應的reducer并傳入state和這個action，reducer對state進行處理并返回一個新的state放入store，connect監聽store發生變化，調用setState更新組件，此時組件的props也就跟著發生變化

connect，Provider，mapStateToProps,mapDispatchToProps,是react-redux提供的，redux本身和react沒有關系，它只是數據處理中心，是react-redux讓它們聯系在一起。
redux由store，reducer，action組成

store是一個對象，它主要有四個方法

dispatch：用于action的分發，在creactStore中對dispatch進行改造，比如當action傳入dispatch中會立即觸發reducer，有時我們不希望立即觸發，而是等待異步操作結束后觸發，這時不是只能傳入一個對象，而是能傳入一個函數，在函數里我們dispatch一個action對象，實現了異步

subscribe：監聽state的變化，這個函數調用dispatch時會注冊一個listener監聽state變化當我們需要知道state是否變化時可以調用，它返回一個函數，調用這個返回的函數可以注銷監聽，let unsubscribe=store.subscribe(()=>{console.log("state發生了變化")})

getState：
兩個需要用到的地方：
1.獲取store中的state，用action觸發reducer改變了state時，并將數據傳給reducer這個過程是自動執行的
2.利用subscribe監聽到state發生變化后調用它來獲取新的state數據

replaceReducer:
替換reducer，改變state修改的邏輯

store通過createStore()方法創建，接受三個參數，經過combineReducers合并的reducer和state初始狀態以及改變dispatch的中間件，后兩個參數不是必須的，store的主要作用是將action和reducer聯系起來并改變state，

action

action是一個對象，其中type屬性是必須的，同時可以傳入一些數據，action可以用actionCreator進行創造，dispatch就是把action對象發送出去

reducer

reducer是一個函數，它接受一個state和一個action，根據action的type返回一個新的state根據業務邏輯可以分為多個reducer，然后通過combineReducers將它們合并，state中有很多對象，每個state對象對應一個reducer，
eg：
const reducer =combineReducers(
{
    a:doSomethingWithA,
    b:processB,
    c:c
}
)

combineReducers:

其實它也是一個reducer，它接受整個state和一個action，然后將整個state拆分發送給對應的reducer進行處理，所有的reducer會收到相同的action，不過他們會根據action的type進行判斷，有這個就進行處理然后返回新的state，沒有就返回默認值，然后分散的state又會整合在一起返回一個新的state，

connect

connect（mapStateToProps,mapDispatchToProps,mergeProps,options）是一個函數，它接受
四個參數并且再返回一個函數，wrapWithConnect，wrapWithConnect接受一個組件作為參數，它的內部定義一個新組件，并將傳入的組件作為Connect的子組件然后return回去。

完整寫法：
connect（mapStateToProps,mapDispatchToProps,mergeProps,options）（component）

mapStateToProps（state，[ownProps]）

1.mapStateToProps接受兩個參數，store的state和自定義的props，
2.并返回一個新的對象，這個對象會作為props的一部分傳入ui組件，
3.我們可以根據組件所需要的數據自定義返回一個對象，ownProps的變化也會觸發mapStateProps
function mapStateToProps(state){
    return {todos:state.todos};
}

mapDispatchToProps(dispatch,[ownProps])

1.mapDispatchToProps如果是對象，那么會和store綁定作為props的一部分傳入ui組件
2.如果是個函數，它接受兩個參數，bindActionCreators會將action和dispatch綁定并返回一個對象，這個對象會和ownProps一起作為props的一部分傳入ui組件，
3.所以不論mapDispatchToProps是對象還是函數，它最終都會返回一個對象，如果是函數，這個對象的key值是可以自定義的。
4.mapDispatchToProps返回的對象屬性其實就是一個個actionCeator，因為已經和dispatch綁定，所以當調用actionCreator時會立即發送action，而不是手動dispatch，
5.ownProps的變化也會觸發mapDispatchToProps

mergeProps(tateProps,dispatchProps,ownProps)

將 mapStateToProps()和mapDispatchToProps()返回的對象和組件自身的props合并成新的props并傳入組件，默認返回stateProps和dispatchProps的結果之和

options：

pure=true表示Connect容器組件將在shouldComponentUpdate中對store的state和ownProps進行淺對比，判斷是否發生變化，優化性能，為false則不對比。

完整的React--Redux--React流程

一.Provider組件接受redux的store作為props，然后通過context往下傳

二.connect函數在初始化的時候會將mapDispatchToProps對象綁定到store，

如果mapDispatchToProps是函數則在Connect組件獲得store之后，
根據傳入的store.dispatch和action通過bindActionCreators進行綁定，再將返回的對象綁定到store，connect函數會返回一個wrapWithConnect函數，
同時wrapWithConnect會被調用且傳入一個ui組件，wrapWithConnect內部定義了一個Connect組件，傳入的ui組件是Connect的子組件，

然后Connect組件會通過context獲得store，并通過store.getState獲得完整的state對象，將state傳入mapStateToProps返回stateProps對象，

然后Connect組件會通過context獲得store，并通過store.getState獲得完整的state對象，將state傳入mapStateToProps返回stateProps對象、mapDispatchToProps對象或mapDispatchToProps函數會返回一個dispatchProps對象，stateProps、dispatchProps以及Connect組件的props

三.
此時ui組件就可以在props中找到actionCreator，

當我們調用actionCreator時會自動調用dispatch，

在dispatch中會調用getState獲取整個state，同時注冊一個listener監聽state的變化，
store將獲得的state和action傳給combineReducers，

combineReducers會將state依據state的key值分別傳給子reducer，并將action傳給全部子reducer，

reducer會被依次執行進行action.type的判斷，如果有則返回一個新的state，如果沒有則返回默認。

combineReducers再次將子reducer返回的單個state進行合并成一個新的完整的state。此時state發生了變化。

dispatch在state返回新的值之后會調用所有注冊的listener函數其中包括handleChange函數，

handleChange函數內部首先調用getState獲取新的state值并對新舊兩個state進行淺對比，如果相同直接return，

如果不同則調用mapStateToProps獲取stateProps并將新舊兩個stateProps進行淺對比，如果相同，直接return結束，不進行后續操作。
如果不相同則調用this.setState()觸發Connect組件的更新，傳入ui組件，觸發ui組件的更新，此時ui組件獲得新的props，

react --> redux --> react 的一次流程結束。

云服務器 GPU云服務器人工智能原理及其應用工作原理網絡工作原理爬蟲工作原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102199.html

JavaScript 是如何工作的：編寫自己的 Web 開發框架 + React 及其虛擬 DOM

摘要：與大多數全局對象不同，沒有構造函數。為什么要設計更加有用的返回值早期寫法寫法函數式操作早期寫法寫法可變參數形式的構造函數一般寫法寫法當然還有很多，大家可以自行到上查看什么是代理設計模式代理模式，為其他對象提供一種代理以控制對這個對象的訪問。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 19 篇。如果你錯過了前面的章節，可以在這里找到它們：想閱讀更多優質文章請...

余學文 2019-08-26 13:30 評論0 收藏0
JavaScript 是如何工作的系列文章已更新到22篇

摘要：為了方便大家共同學習，整理了之前博客系列的文章，目前已整理是如何工作這個系列，可以請猛戳博客查看。以下列出該系列目錄，歡迎點個星星，我將更友動力整理理優質的文章，一起學習。為了方便大家共同學習，整理了之前博客系列的文章，目前已整理 JavaScript 是如何工作這個系列，可以請猛戳GitHub博客查看。以下列出該系列目錄，歡迎點個星星，我將更友動力整理理優質的文章，一起學習。 J...

lx1036 2019-08-26 13:48 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研發體系...

isaced 2019-05-21 19:50 評論0 收藏0
你要的 React 面試知識點，都在這了

摘要：是流行的框架之一，在年及以后將會更加流行。于年首次發布，多年來廣受歡迎。下面是另一個名為的高階函數示例，該函數接受另外兩個函數，分別是和。將所有較小的函數組合成更大的函數，最終，得到一個應用程序，這稱為組合。 React是流行的javascript框架之一，在2019年及以后將會更加流行。React于2013年首次發布，多年來廣受歡迎。它是一個聲明性的、基于組件的、用于構建用戶界面的高...

klinson 2019-08-23 17:52 評論0 收藏0