-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
參考資料 https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.f88zi8dyb 簡單來說,render 會常常被呼叫,所以一直產生新物件的話,你的系統會花很多 時間跑 GC,造成效能低落。bind 基本上是在原來的函式外包再包一層,所以是產 生新的物件。 一般常見的解決方法是在 constructor 裡把 callback 重新綁定 constructor(...) { this.handler = this.handler.bind(this); } 這樣的寫法我覺得太麻煩,語意也不清楚,所以用 decorator 來處理。這裡有一 個要注意的:用 decorator 魔改過的 constructor 要記得設定 name 屬性。我非 常建議讀者自己試著註解掉 types.tsx 的 Bind 函式裡的 Object.defineProperty 之後,再修改測試碼用 wrapper.debug() 看看 render 出來的結果是什麼。 另外在 CurrencySelector.render 裡,原本是每次呼叫的時候動態產生所有的 option 元素,當然也是產生了新物件。既然 T 是固定的,所以在 constructor 裡直接產生就好。 而在 OrderList 裡,tbody 裡的 tr 是完全不固定的,所以只能每次動態產生。
- Loading branch information
Showing
5 changed files
with
74 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters