情景描述
- 一直對(duì)redux很多地方有疑惑，打算今天一并試一試
- 我嘗試給最外層組件包裝了一個(gè)container隅要。
- 我的猜想是：
- 最外層組件的rerender === 頁(yè)面刷新
- 任何一個(gè)被container包含的組件都可拿到store中的所有數(shù)據(jù)。而mapStateToProps的作用只是說翼闽，控制哪些變量的變化導(dǎo)致頁(yè)面的rerender拾徙。
困惑點(diǎn)
- 最外層組件到底能不能被包c(diǎn)ontainer，把他當(dāng)做一般組件一樣使用redux會(huì)不會(huì)發(fā)生什么異常感局？
最外層組件的屬性值是通過什么方式拿到的尼啡？
- 錯(cuò)誤假設(shè)：最外層組件的父組件就是<Provider>是不是可以直接傳遞store中的數(shù)據(jù)呢？
- 正確解釋
- 任何一個(gè)組件（包含最外層組件）只有包裝了container才能夠拿到store中的數(shù)據(jù)询微。
- 請(qǐng)注意：connect的第一個(gè)參數(shù)mapStateToProps函數(shù)：返回值一定要是一個(gè)對(duì)象崖瞭，因?yàn)閠his.props是一個(gè)對(duì)象，如果想要通過this.props拿到數(shù)據(jù)撑毛，必須給每一個(gè)value一個(gè)key书聚。
- 這時(shí)候組件內(nèi)部能夠訪問的數(shù)據(jù)就是mapStateToProps函數(shù)返回的對(duì)象中的屬性。
那么為什么項(xiàng)目要求mapStateToProps函數(shù)只返回當(dāng)前組件需要的數(shù)據(jù)呢藻雌？
- 因?yàn)閙apStateToProps不僅可以將數(shù)據(jù)傳入組件
- 而且監(jiān)聽store中這些數(shù)據(jù)的變化雌续，一旦數(shù)據(jù)變化就調(diào)用組件的render函數(shù)。
- 因此如果我們將store中的所有數(shù)據(jù)傳入組件胯杭，就會(huì)導(dǎo)致驯杜，與組件不相關(guān)的屬性變化也會(huì)導(dǎo)致當(dāng)前組件的rerender。
---> 結(jié)論： 被container包裹的組件是否rerender取決于mapStateToProps返回的屬性值有沒有變化做个。而不是根據(jù)當(dāng)前組件的render函數(shù)是否調(diào)用這個(gè)變量來決定的
而為了減少不必要的render需要根據(jù)以上特性決定mapStateToprops的返回值鸽心。
父類進(jìn)行rerender那么子類的render函數(shù)會(huì)被調(diào)用嗎？
- 錯(cuò)誤的認(rèn)為：以前認(rèn)為只有父類的傳給子類的props屬性值有變化居暖，才會(huì)導(dǎo)致子類重新render顽频。
- 現(xiàn)在發(fā)現(xiàn)：
- 只要父類重新render那么一定導(dǎo)致子類的重新render。
- 為了提高效率太闺，我們可以通過設(shè)置下面函數(shù)返回值的true or false確定組件是否需要重新render
shouldComponentUpdate(nextProps){ return false; }
書上說react非常不推崇的反模式在constructor中zuo如下函數(shù)糯景，應(yīng)該將他改寫成在render中獲取，為什么?
constructor（）{
this.state={
name: this.prop.name
}//父類傳入的屬性值
}
render （） {
const name = this.state.name
//永遠(yuǎn)不變
}
----------------改寫成
render（）{
const name = this.props.name;
}
}
- 我想現(xiàn)在可以解釋原因：
- 由于父類的屬性name變化父類組件render
- 父類組件render跟束，導(dǎo)致子類組件render
- 這時(shí)候自然的就傳入了最新的name進(jìn)入子類
- 如果采用反模式
- 由于父類的屬性name變化父類組件render
- 父類組件render莺奸，導(dǎo)致子類組件render
- 但是不會(huì)導(dǎo)致子類的constructor重新執(zhí)行一遍，因此不論this.props.name如何改變冀宴。子類render中獲取的name都不會(huì)變化灭贷。
反思
- 太粗心，驗(yàn)證的時(shí)候總是認(rèn)為是什么樣的就認(rèn)定是這樣略贮，只要有某一次的結(jié)果偶然出現(xiàn)某個(gè)期望的結(jié)果就認(rèn)為結(jié)論正確甚疟，沒有進(jìn)行單一改變和重新梳理思路的過程仗岖。還是做事過于心急。
action
- 每個(gè)驗(yàn)證完的結(jié)論 必須復(fù)盤览妖。從頭到尾梳理一遍你的驗(yàn)證過程轧拄，檢查有沒有錯(cuò)誤》砀啵或者使用不當(dāng)?shù)牡胤健?/li>
-------> 研究有些跑題但也算是驗(yàn)證了使用react-redux很多的疑惑有機(jī)會(huì)繼續(xù)驗(yàn)證
