<b>瀏覽器的重繪和重排版(reflows & repaints)（DOM操作都會(huì)引起）才是導(dǎo)致網(wǎng)頁(yè)性能問(wèn)題的關(guān)鍵虏冻。而React虛擬DOM的目的就是為了減少瀏覽器的重繪和重排版墓怀。</b>
一、react中的問(wèn)題
有時(shí)候組件的render方法會(huì)在不必要的情況下被調(diào)用抬驴。比如：組件渲染的過(guò)程中炼七，并沒(méi)有使用props或者state的值，或者組件的props或者state并沒(méi)有在父組件重新繪染時(shí)發(fā)生改變布持。這意味著重新繪染這個(gè)組件會(huì)得到和已知虛擬DOM一模一樣的結(jié)果豌拙。
- 性能檢測(cè)
安裝 react 性能檢測(cè)工具 npm i react-addons-perf --save
在程序中 import Perf from 'react-addons-perf'就可以了
使用方法：先運(yùn)行Perf.start()開(kāi)始檢測(cè)，然后進(jìn)行若干操作题暖，運(yùn)行Perf.stop停止檢測(cè)按傅，然后再運(yùn)行Perf.printWasted()即可打印出浪費(fèi)性能的組件列表。在項(xiàng)目開(kāi)發(fā)過(guò)程中胧卤，要經(jīng)常使用檢測(cè)工具來(lái)看看性能是否正常唯绍。
二、優(yōu)化關(guān)鍵shouldComponentUpdate
組件更新生命周期中必調(diào)用shouldComponentUpdate枝誊，字面意思是組件是否應(yīng)該更新况芒。shouldComponentUpdate默認(rèn)返回true，必更新叶撒。所有當(dāng)我們判斷出組件沒(méi)必要更新是绝骚，shouldComponentUpdate可以返回false，就達(dá)到優(yōu)化效果祠够。
-
PureRenderMixin 優(yōu)化
React 最基本的優(yōu)化方式是使用PureRenderMixin压汪，安裝工具 npm i react-addons-pure-render-mixin --save，然后在組件中引用并使用哪审。
//官方例子
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}render() { return <div className={this.props.className}>foo</div>; } } Immutable.js 優(yōu)化
適用于數(shù)據(jù)結(jié)構(gòu)層次很深的情況蛾魄，本人沒(méi)有用過(guò)虑瀑。
<b>總結(jié)</b>：優(yōu)化還是要從設(shè)計(jì)著手湿滓，盡量把數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)的扁平一些，這樣既有助于優(yōu)化系統(tǒng)性能舌狗，又減少了開(kāi)發(fā)復(fù)雜度和開(kāi)發(fā)成本叽奥。
三、如何這種類似功能一致性
現(xiàn)總結(jié)兩點(diǎn)：
- 后端返回?cái)?shù)據(jù)的高度統(tǒng)一性痛侍，例如都是{data: [...], hasMore: true}這種形式
- 前端組件的高度拆分和抽象朝氓，以便做到最大極限的靈活拼接魔市。
