React和Redux的連線react redux

之前僅通過redux文件來了解react-redux，在一段時間的實踐後準備翻一翻源**，順便做些相關的總結。我看的**的npm版本為v4.0.0，也就是說使用的react版本是0.14.x。

react-redux提供兩個關鍵模組：provider和connect。

這個是provider的使用示例：

const history = createhistory()

const root = (

provider>

)// render

reactdom.render(

root,

document.getelementbyid('root')

)這個模組是算是真正意義上連線了redux和react，正好它的名字也叫connect。

先考慮redux是怎麼運作的：首先store中維護了乙個state，我們dispatch乙個action，接下來reducer根據這個action更新state。

好了，詳細看看connect這個模組做了什麼。先從它的使用來說，它的api如下：

connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops], [options])

mapstatetoprops是乙個函式，返回值表示的是需要merge進props的state。預設值為() => ({})，即什麼都不傳。

(state, props) => () // 通常會省略第二個引數

mapdispatchtoprops是可以是乙個函式，返回值表示的是需要merge僅props的actioncreators，這裡的actioncreator應該是已經被包裝了dispatch了的，推薦使用redux的bindactioncreators函式。

(dispatch, props) => (, dispatch)
})

更方便的是可以直接接受乙個物件，此時connect函式內部會將其轉變為函式，這個函式和上面那個例子是一模一樣的。

mergeprops用於自定義merge流程，下面這個是預設流程，parentprops值的就是元件自身的props，可以發現如果元件的props上出現同名，會被覆蓋。

(stateprops, dispatchprops, parentprops) => ()

connect返回乙個函式，它接受乙個react元件的建構函式作為連線物件，最終返回連線好的元件建構函式。

然後幾個問題：

我們把connect返回的函式叫做connector，它返回的是內部的乙個叫connect的元件，它在包裝原有元件的基礎上，還在內部監聽了redux的store的變化，為了讓被它包裝的元件可以響應store的變化:

trysubscribe() 
}handlechange () )
}

具體優化的方式就是在shouldcomponentupdate中做檢查，如果只有在元件自身的props改變，或者mapstatetoprops的結果改變，或者是mapdispatchtoprops的結果改變時shouldcomponentupdate才會返回true，檢查的方式是進行shallowequal的比較。

所以對於某個reducer來說：

export default (state = {}, action) =>  // 返回的是乙個新的物件，可能會使元件rerender
// return state // 可能不會使得元件rerender
}

另外在connect的時候，要謹慎map真正需要的state或者actioncreators到props中，以避免不必要的效能損失。

最後，根據connect的api我們發現可以使用es7 decorator功能來配合react es6的寫法：

@connect(
state => (),
dispatch => (, dispatch)
}))export default class main extends component

React和Redux的連線react redux

react中redux的使用

react 中的redux的使用

react和redux中的幾種常用的方法

React和Redux的連線react redux

react中redux的使用

react 中的redux的使用

react和redux中的幾種常用的方法

相關推薦