React性能優(yōu)化系列之減少props改變的實(shí)現(xiàn)方法
React性能優(yōu)化的一個(gè)核心點(diǎn)就是減少render的次數(shù)。如果你的組件沒(méi)有做過(guò)特殊的處理（SCU -- shouldComponentUpdate或使用PureComponent），那每次父組件render時(shí)，子組件就會(huì)跟著一起被重新渲染。通常一個(gè)復(fù)雜的子組件都會(huì)進(jìn)行一些優(yōu)化，比如：SCU 使用PureComponent組件。對(duì)于SCU基本上進(jìn)行的也都是淺比較，深比較的代價(jià)太高。
對(duì)于這些被優(yōu)化的子組件，我們要減少一些不必要的props改變：比如事件綁定。對(duì)于那些依賴于配置項(xiàng)的組件，我們更是減少這些作為props的配置的變化，因?yàn)榭赡芤坏渲庙?xiàng)發(fā)生了變化，整個(gè)組件都會(huì)跟著重新渲染，所以我們要盡可能的減少props的改變
事件綁定
class ClickMe extends React.Component {
state = {
value: '3333',
};
render() {
return (
<Button
onClick={() => {
console.log('l am clicked!', this.state.value);
}}
>
click me
</Button>
)
}
}
相信大多數(shù)的開(kāi)發(fā)者React都會(huì)指出這種寫(xiě)法的缺點(diǎn)：每次ClickMe組件渲染的時(shí)候onClick屬性與上一次的值相比都是一個(gè)不同的匿名函數(shù)，如果Button是一個(gè)復(fù)雜的子組件且內(nèi)部沒(méi)有經(jīng)過(guò)任何特殊的處理，那就會(huì)造成多余的渲染。對(duì)于這種情況的做法一般有兩種方式：
- 在構(gòu)造函數(shù)內(nèi)綁定 this
- 將箭頭函數(shù)賦予class的屬性
class ClickMe extends React.Component {
state = {
value: '3333',
};
handleClick = () => {
console.log('l am clicked!', this.state.value);
};
render() {
return (
<Button
onClick={this.handleClick}
>
click me
</Button>
)
}
}
// 或
class ClickMe extends React.Component {
constuctor(props) {
super(props);
this.state = {
value: '3333',
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('l am clicked!', this.state.value);
}
render() {
return (
<Button
onClick={this.handleClick}
>
click me
</Button>
)
}
}
批量事件綁定
那在考慮下面這種情況，涉及到子組件的批量綁定時(shí)：
class MultiClick extends React.Component {
dataSource = [
{ key: '1', value: '1' },
{ key: '2', value: '2' },
{ key: '3', value: '3' },
{ key: '4', value: '4' },
];
handleClick = key => {
console.error('key:', key);
};
render() {
return (
<div>
{this.dataSource.map(item => (
<div
key={item.key}
onClick={() => {
this.handleClick(item.key);
}}
>
{item.value}
</div>
))}
</div>
);
}
}
類(lèi)似于這種需要傳遞參數(shù)的情況，該如何去優(yōu)化？
這個(gè)就需要我們?nèi)プ鰯?shù)據(jù)的緩存，即回調(diào)的緩存，上述例子如下：
cacheMap = {};
genClickHandler = key => {
if (!this.cacheMap[key]) {
this.cacheMap[key] = () => {
console.error('key:', key);
};
}
return this.cacheMap[key];
};
// 綁定
<div key={item.key} onClick={this.genClickHandler(item.key)}>
{item.value}
</div>;
如果多個(gè)基本類(lèi)型的參數(shù)可以，將他們拼接成字符串作為cacheMap的key，簡(jiǎn)單的引用類(lèi)型可以使用JSON.stringify，不過(guò)原則上作為事件綁定的函數(shù) 傳遞的參數(shù)簡(jiǎn)單為好。
作為配置的props緩存
說(shuō)到數(shù)據(jù)的緩存，不管光是事件的回調(diào)，還有很多 其他情況。比如表格的 columns需要根據(jù)屬性變化的這種場(chǎng)景：
class TableDemo extends React.Component {
getColumns = () => {
const { name } = this.state;
return [
{
key: '1',
title: `${name}_1`,
},
{
key: '2',
title: `${name}_2`,
},
];
};
render() {
const { dataSource } = this.props;
return <Table dataSource={dataSource} columns={this.getColumns()} />;
}
}
這種情況每次組件render的時(shí)候，getColumns都會(huì)被調(diào)用一次，而這個(gè)函數(shù)每次的返回值都是不一樣的 ，及時(shí)這兩次的name值都相等，原因大家可以類(lèi)比[] !== []這里就不過(guò)多敘述了。
有一種做法是，將columns作為一個(gè)this.state的一個(gè)屬性，在初始化和每次 this.state.name改變的時(shí)候同步改變this.state.columns的值，但如果有多個(gè) 類(lèi)似于this.state.name的變量控制this.state.columns的值時(shí)候，發(fā)現(xiàn)每個(gè)變量變化的時(shí)候都要調(diào)用生成columns的方法， 十分的煩瑣易造成錯(cuò)誤。
使用緩存可以很好的解決這個(gè)問(wèn)題，在參數(shù)較為復(fù)雜的時(shí)候，我們選擇只緩存上一次的值。先看代碼再說(shuō)：
首先我們寫(xiě)一個(gè)緩存的函數(shù)
function cacheFun(cb) {
let preResult = null
let preParams = null
const equalCb = cb || shallowEqual
return (fun, params) => {
if (preResult && equalCb(preParams, params)) {
return preResult
}
preResult = fun(params)
preParams = params
return preResult
}
}
這個(gè)緩存函數(shù)是一個(gè)閉包函數(shù)，保存了上一次的參數(shù)和上一次的結(jié)果，主要的實(shí)現(xiàn)就是比較兩次的參數(shù)，相同則返回上一次結(jié)果，不同則返回 調(diào)用函數(shù)的新結(jié)果。當(dāng)然 對(duì)于某些特殊的情況只需要根據(jù)傳入特定的某幾個(gè)參數(shù)做出判斷，這種情況你可以傳入自定義的比較函數(shù)。先看一下上面的實(shí)現(xiàn)：
cacheFun函數(shù)第一個(gè)參數(shù)為選填的選項(xiàng)，是你比較兩次參數(shù)的 方法，如果你不傳入則僅進(jìn)行 淺比較（與 React 的淺比較相似）。
返回函數(shù)的第一個(gè)參數(shù)為你的 生成columns的回調(diào)，params 為你需要的 變量，如果你的變量比較多，你可以將他們 作為一個(gè)對(duì)象傳入；那么代碼就類(lèi)似如下：
const params = { name, time, handler };
cacheFun(this.getColumns, params, cb);
在類(lèi)中的使用為：
class TableDemo extends React.Component {
getColumns = name => {
return [
{
key: '1',
title: `${name}_1`,
},
{
key: '2',
title: `${name}_2`,
},
];
};
getColumnsWrapper = () => {
const { name } = this.state;
return cacheFun()(this.getColumns, name);
};
render() {
const { dataSource } = this.props;
return (
<Table dataSource={dataSource} columns={this.getColumnsWrapper()} />
);
}
}
假如你不喜歡對(duì)象的傳值方式，那你可以 對(duì)這個(gè)緩存函數(shù)進(jìn)行更改：
function cacheFun(cb) {
let preResult = null;
let preParams = null;
const equalCb = cb || shallowEqual;
return (fun, ...params) => {
if (preResult) {
const isEqual = params.ervey((param, i) => {
const preParam = preParams && preParams[i];
return equalCb(param, preParam);
});
if (isEqual) {
return preResult;
}
}
preResult = fun(params);
preParams = params;
return preResult;
};
}
你這可以這樣使用：
cacheFun()(this.getColumns, name, key, param1, params2);
// 或者
cacheFun()(this.getColumns, name, key, { param1, params2 });
這樣配置也就被緩存優(yōu)化了，當(dāng)TableDemo組件因非name屬性render時(shí)，這時(shí)候你的columns還是返回上一次緩存的值，是的Table這個(gè)組件減少了一次因columns引用不同產(chǎn)生的render。如果Table的dataSource數(shù)據(jù)量很大，那這次對(duì)應(yīng)用的優(yōu)化就很可觀了。
數(shù)據(jù)的緩存
數(shù)據(jù)的緩存在原生的內(nèi)部也有使用cacheFun的場(chǎng)景，如對(duì)于一個(gè)list 根據(jù) searchStr模糊過(guò)濾對(duì)于的subList。
大致代碼如下：
class SearchList extends React.Component {
state = {
list: [
{ value: '1', key: '1' },
{ value: '11', key: '11' },
{ value: '111', key: '111' },
{ value: '2', key: '2' },
{ value: '22', key: '22' },
{ value: '222', key: '222' },
{ value: '2222', key: '2222' },
],
searchStr: '',
}
// ...
render() {
const { searchStr, list } = this.state
const dataSource = list.filter(it => it.indexOf(searchStr) > -1)
return (
<div>
<Input onChange={this.handleChange} />
<List dataSource={dataSource} />
</div>
)
}
}
對(duì)于此情景的優(yōu)化使用cacheFun也可以實(shí)現(xiàn)
const dataSource = cacheFun()((plist, pSearchStr) => {
return plist.filter(it => it.indexOf(pSearchStr) > -1)
}, list, searchStr)
但是有大量的類(lèi)似于此的衍生值的時(shí)候，這樣的寫(xiě)法又顯得不夠。社區(qū)上出現(xiàn)了許多框架如配合react-redux使用reselect（當(dāng)然也可以單獨(dú)使用，不過(guò)配合redux使用簡(jiǎn)直就是前端數(shù)據(jù)管理的一大殺手锏），還有mobx的衍生概念等。這些后續(xù)會(huì)單獨(dú)介紹，這里就稍微提一下。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解react如何在組件中獲取路由參數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以了解下2023-10-10
這篇文章主要為大家介紹了React Hooks閉包陷阱的深入探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React項(xiàng)目中decorators裝飾器報(bào)錯(cuò)問(wèn)題解決方案
這篇文章主要介紹了React項(xiàng)目中decorators裝飾器報(bào)錯(cuò)，本文給大家分享問(wèn)題所在原因及解決方案，通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
簡(jiǎn)單來(lái)說(shuō)就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。 自定義hook是一個(gè)從use開(kāi)始的調(diào)用其他hook的Javascript函數(shù)，下面看下react中創(chuàng)建自定義hooks的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-11-11
眾所周知，性能是Web應(yīng)用界面的關(guān)鍵方面，它直接影響到用戶的使用體驗(yàn)。本文將向您展示十種提高React UI性能的特定技術(shù)和一般方法。2021-05-05
React Hooks常用場(chǎng)景的使用(小結(jié))
這篇文章主要介紹了React Hooks常用場(chǎng)景的使用，根據(jù)使用場(chǎng)景分別進(jìn)行舉例說(shuō)明，幫助你認(rèn)識(shí)理解并可以熟練運(yùn)用 React Hooks 大部分特性，感興趣的可以了解一下2021-04-04
這篇文章主要介紹了React?echarts?組件的封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
JavaScript的React Web庫(kù)的理念剖析及基礎(chǔ)上手指南
這篇文章主要介紹了JavaScript的React Web庫(kù)的理念剖析及基礎(chǔ)上手指南,React Web的目的即是把本地的React Native應(yīng)用程序項(xiàng)目變?yōu)閃eb應(yīng)用程序,需要的朋友可以參考下2016-05-05
本篇文章主要介紹了關(guān)于react-router的幾種配置方式詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07