react配合redux的生命周期(shouldComponentUpdate)的問題?
react觸發shouldComponentUpdate有四種:
1 首次渲染Initial Render
2 調用this.setState
3 父組件render(無論傳進來的props是否改變)
4 調用this.forceUpdate
如果react項目中使用了redux,通過@connect高階組件的方式給組件props增加redux的某些狀態,那麼這裡的redux的狀態改變是如何觸發shouldComponentUpdate這個周期的,是和3過程一樣還是有它自己的監聽方式
謝邀。
題主說的第1中情況也就是初次渲染的時候是不會調用shouldComponentUpdate的,既然函數名中有Update,這很好理解。
Redux和React完全沒有關係,所以沒有用什麼密不可宣的API或者神奇的技巧,connect創建的函數是一個高階組件,所謂高階組件就是傳入一個組件返回一個新的組件,新的組件有一個新的shouldComponentUpdate實現,和裡面包住的組件沒有什麼關係,新的組件有自己的state,新的組建的shouldComponentUpdate基本上也就是判斷自己的state和props這些事。
樓上已經答了。這邊補充一下,其實forceUpdate會跳過shouldComponentUpdate強制更新的,也就是說,第四種情況也不會觸發這一生命周期,但是它的子組件會觸發。
https://reactjs.org/docs/react-component.html#forceupdatereact-redux中有一個操作是
store.subscribe(reactDOM.render(xxxx))
一般現在大家也都這麼用,觸發更新的秘密就在reactDOM.render()這個函數裡面。
reactDOM.render()這個函數其實有兩個作用:
- 把節點渲染到了某個節點上
- 如果某個節點曾經被渲染,那麼則更新這個節點上的內容
第一個點,很多人都知道,但是第二個點就比較少人知道了。說個簡單的例子:
class Fuck extends Component(){
shouldComponentUpdate(){
console.log(我更新了)
return true
}
render(){
return &shit&
}
}
reactDOM.render(&,document.getElementById(root))//這一行是首次渲染。
reactDOM.render(&
reactDOM.render(&
reactDOM.render(&
reactDOM.render(&
reactDOM.render(&
reactDOM.render(&
實際上,redux跟react綁定其實並不緊密,可以說完全沒關係,緊密的是react-redux這個庫。
redux更新的思想就是:
當store中狀態變化的時候,調用被subscribe的對象進行更新。在react-redux中,一般做法就是,當store狀態變化的時候,就會調用一次reactDOM.render()
那麼其實就很清晰了,你的問題的答案就是:沒錯,其實就是父組件更新,而且一般來說還是最頂層的那個父親....
發現這個還是因為我自己寫了個react,並且在做react-redux 支持的時候,發現的
Luy,一個類React迷你框架
使用的是2。源碼中用了setState({}),可以在onXxx的回調中多次調用dispatch驗證。會走shouldComponentUpdate,會做shallowCompare比較,也很容易驗證。源代碼也很短,可以去看看。
RTFD:
[
pure
] (Boolean): If true,connect()
will avoid re-renders and calls tomapStateToProps
,mapDispatchToProps
, andmergeProps
if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the wrapped component is a 「pure」 component and does not rely on any input or state other than its props and the selected Redux store』s state. Default value:true
調用 connect 默認會返回一個 PureComponent, 其中用 shallowCompare 實現了 shouldComponentUpdate 鉤子,所以一般情況你寫的 Presentational Component 無需實現 shouldComponentUpdate。
reactjs/react-redux
根據官方文檔,
shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.
第一種和第四種情況 shouldComponentUpdate 都不會觸發。對於 redux,connect 的作用就是 mapStateToProps 和 mapDispatchToProps,即將 state 和 dispatch(action) map 成該組件的 props。所以 store 的狀態改變,被映射到該組件的 props 也就會變,進而觸發 shouldComponentUpdate()。
瀉藥。 在初始化後,再次改變組件props、state的都會調用。初始化不會調用update等相關生命周期,顧名思義的去看生命周期函數就很明了啦
connect的代碼很短,看下你就理解怎麼回事了。光說你肯定還是不太理解。react的部分,看官方的文檔,react的文檔寫的越來越好了。
推薦閱讀:
※Redux中的reducer到底是什麼,以及它為什麼叫reducer?
※寫在2017的前端數據層不完全指北
※Redux-Saga 初識和總結
※如何規模化React應用