Moon Light Box

Time is Money

React - Redux

| Comments

http://taobaofed.org/blog/2016/08/18/react-redux-connect/

http://mz026.logdown.com/posts/332288-hello-redux-1-1-react-redux-guide

在 Redux 的架構下,和 React 結合的方法就是,我們找到某些 "比較上層的 React Components", 在這些 components 裡面把 Redux 的 state 設成 component 的 state。然後在這些 state 改變的時候用我們熟悉的 component setState 來 trigger re-render。如此一來我們就把 Redux 的 state 和 React 結合在一起了。

有了這些 "比較上層的" components 之後,接著我們就可以把這些 components 進一步再切割成更小的 components,並且把 Redux 的 state 以 React 的 props 去建立這些 "更小的 components"。而這些"更小的 components" 其實和 Redux 就又沒有直接關係了,因為它們的行為完全由 props 來決定。對於這些 "更小的 components" 來說,它們並不在乎這些 prop 究竟是從 Redux 來的或者從其他地方來的。

上面提到的 "比較上層的 component" 其實在 Redux 裡的正式名字叫 Smart Component,而 "更小的 components" 叫作 Dumb Component。其中把 Redux state 和 Smart component 接起來的工作,則是由 React-Redux 裡提供的 connect function 來負責。

http://div.io/topic/1579

http://motephyr-blog.logdown.com/posts/308297-react-redux-processes

Performance:

https://medium.com/as790726/react-js-%E6%95%88%E8%83%BD%E5%AF%A6%E9%A9%97-%E7%95%B6-react-js-%E9%81%87%E5%88%B0-10000-%E5%80%8B-checkboxes-6d1584546456@

http://cepave.com/do-not-choose-react-just-for-performance/

React 會在記憶體中完整的複製一份 DOM Tree,然後透過標記 Dirty Nodes 來找到真正會重繪的 Nodes。如下圖,如果某個 DOM 被標記說要更新了,那麼它以下的所有 Subtree 都會依序被問 shouldComponentUpdate,如果沒有特別實作此函數,就會繼續地往它的 Subtree 問下去。關鍵就在於為了要能夠夠無腦,所以從觸發 setState 其自身節點開始到其全部子節點全部都會被呼叫到 shouldComponentUpdate,導致遍歷所有節點的時間成本非常的高(花很多時間在 React 的 Call Tree 上面)。所有的 DOM 操作都是同步的,而這會堵塞瀏覽器。只要有其中一個操作費時太久,整個網頁就會無法響應,瀏覽器重繪網頁的頻率是 60FPS 如果不能在 16ms 完成 DOM 操作,就會產生跳幀。視覺上感受到的卡頓就來源於此。(同理可推,24 FPS 不可讓 DOM 操作的 RTT 超過 41ms)

Comments

comments powered by Disqus