react基本原理及性能優(yōu)化

VincentFF 發(fā)布于2019-08-22 18:27 / 899人閱讀

摘要：對(duì)同一層級(jí)的子節(jié)點(diǎn)進(jìn)行處理時(shí)，會(huì)根據(jù)進(jìn)行簡(jiǎn)要的復(fù)用。二性能優(yōu)化方案由于中性能主要耗費(fèi)在于階段的算法，因此性能優(yōu)化也主要針對(duì)算法。此時(shí)最常用的優(yōu)化方案即為方法。或者直接使用，原理一致。

一、從React原理談起

react是什么？

react是用于構(gòu)建用戶界面的JS框架。因此react只負(fù)責(zé)解決view層的渲染。

react做了什么？

Virtual Dom模型

生命周期管理

setState機(jī)制

diff算法

React patch、事件系統(tǒng)

react的Virtual Dom模型

virtual dom 實(shí)際上是對(duì)實(shí)際Dom的一個(gè)抽象，是一個(gè)js對(duì)象。react所有的表層操作實(shí)際上是在操作virtual dom。

經(jīng)過diff算法會(huì)計(jì)算出virtual dom的差異，然后將這些差異進(jìn)行實(shí)際的dom操作更新頁面。

react的生命周期

setState機(jī)制 理想情況：

setState是“異步”的，調(diào)用setState只會(huì)提交一次state修改到隊(duì)列中，不會(huì)直接修改this.state。

等到滿足一定條件時(shí)，react會(huì)合并隊(duì)列中的所有修改，觸發(fā)一次update流程，更新this.state。

因此setState機(jī)制減少了update流程的觸發(fā)次數(shù)，從而提高了性能。

由于setState會(huì)觸發(fā)update過程，因此在update過程中必經(jīng)的生命周期中調(diào)用setState會(huì)存在循環(huán)調(diào)用的風(fēng)險(xiǎn)。

另外用于監(jiān)聽state更新完成，可以使用setState方法的第二個(gè)參數(shù)，回調(diào)函數(shù)。在這個(gè)回調(diào)中讀取this.state就是已經(jīng)批量更新后的結(jié)果。

特殊情況：

在實(shí)際開發(fā)中，setState的表現(xiàn)有時(shí)會(huì)不同于理想情況。主要是以下兩種。

在mount流程中調(diào)用setState。
在setTimeout/Promise回調(diào)中調(diào)用setState。
在第一種情況下，不會(huì)進(jìn)入update流程，隊(duì)列在mount時(shí)合并修改并render。

在第二種情況下，setState將不會(huì)進(jìn)行隊(duì)列的批更新，而是直接觸發(fā)一次update流程。

這是由于setState的兩種更新機(jī)制導(dǎo)致的，只有在批量更新模式中，才會(huì)是“異步”的。

diff算法

diff算法用于計(jì)算出兩個(gè)virtual dom的差異，是react中開銷最大的地方。

傳統(tǒng)diff算法通過循環(huán)遞歸對(duì)比差異，算法復(fù)雜度為O(n3)。

react diff算法制定了三條策略，將算法復(fù)雜度從 O(n3)降低到O(n)。

WebUI中DOM節(jié)點(diǎn)跨節(jié)點(diǎn)的操作特別少，可以忽略不計(jì)。

擁有相同類的組件會(huì)擁有相似的DOM結(jié)構(gòu)。擁有不同類的組件會(huì)生成不同的DOM結(jié)構(gòu)。

同一層級(jí)的子節(jié)點(diǎn)，可以根據(jù)唯一的ID來區(qū)分。

針對(duì)這三個(gè)策略，react diff實(shí)施的具體策略是

diff對(duì)樹進(jìn)行分層比較，只對(duì)比兩棵樹同級(jí)別的節(jié)點(diǎn)。跨層級(jí)移動(dòng)節(jié)點(diǎn)，將會(huì)導(dǎo)致節(jié)點(diǎn)刪除，重新插入，無法復(fù)用。

diff對(duì)組件進(jìn)行類比較，類相同的遞歸diff子節(jié)點(diǎn)，不同的直接銷毀重建。

diff對(duì)同一層級(jí)的子節(jié)點(diǎn)進(jìn)行處理時(shí)，會(huì)根據(jù)key進(jìn)行簡(jiǎn)要的復(fù)用。兩棵樹中存在相同key的節(jié)點(diǎn)時(shí)，只會(huì)移動(dòng)節(jié)點(diǎn)。

另外，在對(duì)比同一層級(jí)的子節(jié)點(diǎn)時(shí)。diff算法會(huì)以新樹的第一個(gè)子節(jié)點(diǎn)作為起點(diǎn)遍歷新樹，尋找舊樹中與之相同的節(jié)點(diǎn)。

如果節(jié)點(diǎn)存在，則移動(dòng)位置。如果不存在，則新建一個(gè)節(jié)點(diǎn)。

在這過程中，維護(hù)了一個(gè)字段lastIndex，這個(gè)字段表示已遍歷的所有新樹子節(jié)點(diǎn)在舊樹中最大的index。
在移動(dòng)操作時(shí)，只有舊index小于lastIndex的才會(huì)移動(dòng)。

這個(gè)順序優(yōu)化方案實(shí)際上是基于一個(gè)假設(shè)，大部分的列表操作應(yīng)該是保證列表基本有序的。
可以推倒倒序的情況下，子節(jié)點(diǎn)列表diff的算法復(fù)雜度為O(n2)。

二、性能優(yōu)化方案

由于react中性能主要耗費(fèi)在于update階段的diff算法，因此性能優(yōu)化也主要針對(duì)diff算法。

1.減少diff算法觸發(fā)次數(shù)

減少diff算法觸發(fā)次數(shù)實(shí)際上就是減少update流程的次數(shù)。
正常進(jìn)入update流程有三種方式：

setState

setState機(jī)制在正常運(yùn)行時(shí)，由于批更新策略，已經(jīng)降低了update過程的觸發(fā)次數(shù)。
因此，setState優(yōu)化主要在于非批更新階段中(timeout/Promise回調(diào))，減少setState的觸發(fā)次數(shù)。
常見的業(yè)務(wù)場(chǎng)景即處理接口回調(diào)時(shí)，無論數(shù)據(jù)處理多么復(fù)雜，保證最后只調(diào)用一次setState。

父組件render

父組件的render必然會(huì)觸發(fā)子組件進(jìn)入update階段（無論props是否更新）。此時(shí)最常用的優(yōu)化方案即為shouldComponentUpdate方法。

最常見的方式為進(jìn)行this.props和this.state的淺比較來判斷組件是否需要更新。或者直接使用PureComponent，原理一致。
需要注意的是，父組件的render函數(shù)如果寫的不規(guī)范，將會(huì)導(dǎo)致上述的策略失效。

// Bad case
// 每次父組件觸發(fā)render 將導(dǎo)致傳入的handleClick參數(shù)都是一個(gè)全新的匿名函數(shù)引用。
// 如果this.list 一直都是undefined，每次傳入的默認(rèn)值[]都是一個(gè)全新的Array。
// hitSlop的屬性值每次render都會(huì)生成一個(gè)新對(duì)象
class Father extends Component {
    onClick() {}
    render() {
        return  this.onClick()} list={this.list || []} hitSlop={{ top: 10, left: 10}}/>
    }
}
// Good case
// 在構(gòu)造函數(shù)中綁定函數(shù)，給變量賦值
// render中用到的常量提取成模塊變量或靜態(tài)成員
const hitSlop = {top: 10, left: 10};
class Father extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
        this.list = [];
    }
    onClick() {}
    render() {
        return 
    }
}

forceUpdate

其中forceUpdate方法調(diào)用后將會(huì)直接進(jìn)入componentWillUpdate階段，無法攔截，因此在實(shí)際項(xiàng)目中應(yīng)該棄用。

其他優(yōu)化策略

使用shouldComponentUpdate鉤子，根據(jù)具體的業(yè)務(wù)狀態(tài)，減少不必要的props變化導(dǎo)致的渲染。如一個(gè)不用于渲染的props導(dǎo)致的update。

合理設(shè)計(jì)state，不需要渲染的state，盡量使用實(shí)例成員變量。

不需要渲染的props，合理使用context機(jī)制，或公共模塊（比如一個(gè)單例服務(wù)）變量來替換。

2.正確使用diff算法
不使用跨層級(jí)移動(dòng)節(jié)點(diǎn)的操作。
對(duì)于條件渲染多個(gè)節(jié)點(diǎn)時(shí)，盡量采用隱藏等方式切換節(jié)點(diǎn)，而不是替換節(jié)點(diǎn)。
盡量避免將后面的子節(jié)點(diǎn)移動(dòng)到前面的操作，當(dāng)節(jié)點(diǎn)數(shù)量較多時(shí)，會(huì)產(chǎn)生一定的性能問題。

END.