1. Render
- 一旦 Component 的
this.state或者this.props的值變化，那么當(dāng)前 Component 將會(huì)被重新“繪制”姆蘸。記住墩莫，是“繪制”而不是重新創(chuàng)建，因此this.getInitialState逞敷、this.componentWillMount和this.componentDidMount不會(huì)因此而被調(diào)用狂秦。 - 通過變更
this.state(this.setState) 引起重繪是當(dāng)前 Component 引起 “重繪” 的主要手段，還有一個(gè)手段是this.forceUpdate()兰粉。而通過為 Child Component 設(shè)定新的props的方式故痊，是 Parent Component 引起 Child Component 重繪的主要方法。 - 判斷的時(shí)機(jī)是在一個(gè)重繪周期開始的時(shí)候玖姑，即一次
requestAnimationRequest被回調(diào)的時(shí)候（1/60 秒）愕秫。所以，如果你的所有繪制時(shí)間在 16 秒之內(nèi)被完成焰络，用戶自然就能享受到如絲般柔順的交互了戴甩。React 可能是目前最容易 Tuning UI 性能的框架了，你只要分別記錄不同 Component 的 Render 執(zhí)行時(shí)間就可以了闪彼。 - 檢測
this.state或者this.props的不同是通過“深度比較”來完成的甜孤，也就是說，只要整個(gè)對(duì)象樹的任何一個(gè)“葉子”的值變化畏腕，就將觸發(fā)“重繪”缴川。所以你需要密切注意每一個(gè) Component 的 state 和 props 到底綁定了多大范圍的數(shù)據(jù)，避免不必要的“重繪”描馅。 - 你可以通過重載
this.shouldComponentUpdate替代 React 的深度比較算法把夸。但是，只有當(dāng)你真的理得清楚的時(shí)候才使用這種方法铭污。PureRenderMixin 完成了類似的工作恋日。 - 更好地控制重繪膀篮，依賴于如何更好地將狀態(tài)的變化局部化。這就是 immutable-js 或者 mori 這樣的庫的作用了岂膳。每一個(gè) Component 只綁定到大的數(shù)據(jù)容器的一個(gè)局部誓竿，其他部分的變化不會(huì)造成該 Component 綁定的
state或者props的變化，因此也就避免了不必要的“重繪”谈截。 - 和JS 自己的
Array和Object相比, immutable-js 或者 mori 并非高性能的數(shù)據(jù)結(jié)構(gòu)筷屡，但是其收獲的好處是狀態(tài)的隔離、快速判斷狀態(tài)是否變化（無需深度比較）傻盟，以及由此帶來的最小化的“重繪”速蕊，在 React 的開發(fā)中是非常重要的嫂丙。參見 性能比較娘赴。
2. Component Mount
- Component 在第一次被繪制前被 Mount，之前會(huì)執(zhí)行
this.getInitialState跟啤、this.componentWillMount等一系列的類成員方法诽表。React 的生命周期 文檔寫得很清楚。 - 但是隅肥，“重繪” 不會(huì)引發(fā) Re-mount（你在 Parent Component 為 Child Component 設(shè)定新的 props竿奏，只會(huì)引起 Child Component 的 “重繪”，不會(huì)引起 Child Component 的 Re-mount（重新創(chuàng)建））腥放。
- React 僅在兩種情況下會(huì) Re-mount Component泛啸。一種是通過
React.render <div />重新繪制了整個(gè) Component Tree；還有一種就是 Parent Component 為 Child Component 設(shè)定了keyproperty秃症，且當(dāng)keyproperty 變化了的時(shí)候候址，老的 Child Component 被 Unmount 并銷毀，而新的 Child Component 被重新創(chuàng)建种柑、初始化和 Mount岗仑。
在閱讀過基礎(chǔ)的 React 文檔之后，將上面的要點(diǎn)刻在腦子里聚请，基本上 React 對(duì)你來說就沒什么坑了荠雕。如果上面的內(nèi)容沒有理解就開始編程，那么即使是 React 也幫不上你什么了驶赏。
