摘要：函數(shù)綁定的方式一般有下面種方式綁定構(gòu)造函數(shù)中綁定然后可以使用時(shí)綁定使用箭頭函數(shù)以上三種方法，第一種最優(yōu)。因?yàn)榈谝环N構(gòu)造函數(shù)只在組件初始化的時(shí)候執(zhí)行一次，第二種組件每次都會(huì)執(zhí)行第三種在每一次時(shí)候都會(huì)生成新的箭頭函數(shù)。

這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

React性能優(yōu)化思路

軟件的性能優(yōu)化思路就像生活中去看病，大致是這樣的：

使用工具來(lái)分析性能瓶頸（找病根）

嘗試使用優(yōu)化技巧解決這些問(wèn)題（服藥）

使用工具測(cè)試性能是否確實(shí)有提升（療效確認(rèn)）

初識(shí)react只是為了盡快完成項(xiàng)目，后期進(jìn)行代碼審查時(shí)候發(fā)現(xiàn)有很多地方需要優(yōu)化，因此做了個(gè)小結(jié)。

Code Splitting

shouldComponentUpdate避免重復(fù)渲染

使用不可突變數(shù)據(jù)結(jié)構(gòu)

組件盡可能的進(jìn)行拆分、解耦

列表類組件優(yōu)化

bind函數(shù)優(yōu)化

不要濫用props

ReactDOMServer進(jìn)行服務(wù)端渲染組件

Code Splitting

Code Splitting 可以幫你“懶加載”代碼，如果你沒(méi)辦法直接減少應(yīng)用的體積，那么不妨嘗試把應(yīng)用從單個(gè) bundle 拆分成單個(gè) bundle + 多份動(dòng)態(tài)代碼的形式。

webpack提供三種代碼分離方法，詳情見(jiàn)webpack官網(wǎng)

入口起點(diǎn)：使用 entry 配置手動(dòng)地分離代碼。

防止重復(fù)：使用 SplitChunks 去重和分離 chunk。

動(dòng)態(tài)導(dǎo)入：通過(guò)模塊的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼。

在此，主要了解一下第三種動(dòng)態(tài)導(dǎo)入的方法。

1、例如可以把下面的import方式

`import { add } from` `"./math"``;`
`console.log(add(16, 26));`

改寫(xiě)成動(dòng)態(tài) import 的形式，讓首次加載時(shí)不去加載 math 模塊，從而減少首次加載資源的體積。
[?]了解更多
)

`import(``"./math"``).then(math => {`
`console.log(math.add(16, 26));`
`});`
2、例如引用react的高階組件react-loadable進(jìn)行動(dòng)態(tài)import。

`import Loadable from` `"react-loadable"``;`
`import Loading from` `"./loading-component"``;`
`const LoadableComponent = Loadable({`
`loader: () => import(``"./my-component"``),`
`loading: Loading,`
`});`
`export` `default` `class App extends React.Component {`
`render() {`
`return` `;`
`}`
`}`

上面的代碼在首次加載時(shí)，會(huì)先展示一個(gè) loading-component，然后動(dòng)態(tài)加載 my-component 的代碼，組件代碼加載完畢之后，便會(huì)替換掉

loading-component
shouldComponentUpdate避免重復(fù)渲染

當(dāng)一個(gè)組件的props或者state改變時(shí)，React通過(guò)比較新返回的元素和之前渲染的元素來(lái)決定是否有必要更新實(shí)際的DOM。當(dāng)他們不相等時(shí)，React會(huì)更新DOM。

在一些情況下，你的組件可以通過(guò)重寫(xiě)這個(gè)生命周期函數(shù)shouldComponentUpdate來(lái)提升速度， 它是在重新渲染過(guò)程開(kāi)始前觸發(fā)的。 這個(gè)函數(shù)默認(rèn)返回true，可使React執(zhí)行更新。

為了進(jìn)一步說(shuō)明問(wèn)題，引用官網(wǎng)的圖解釋一下，如下圖（ SCU表示shouldComponentUpdate，綠色表示返回true(需要更新)，紅色表示返回false(不需要更新)；vDOMEq表示虛擬DOM比對(duì)，綠色表示一致(不需要更新)，紅色表示發(fā)生改變(需要更新)）：

根據(jù)渲染流程，首先會(huì)判斷shouldComponentUpdate(SCU)是否需要更新。如果需要更新，則調(diào)用組件的render生成新的虛擬DOM，然后再與舊的虛擬DOM對(duì)比(vDOMEq)，如果對(duì)比一致就不更新，如果對(duì)比不同，則根據(jù)最小粒度改變?nèi)ジ翫OM；如果SCU不需要更新，則直接保持不變，同時(shí)其子元素也保持不變。

C1根節(jié)點(diǎn)，綠色SCU、紅色vDOMEq，表示需要更新。

C2節(jié)點(diǎn)，紅色SCU，表示不需要更新，同時(shí)

C4、C5作為其子節(jié)點(diǎn)也不需要檢查更新。

C3節(jié)點(diǎn)，綠色SCU、紅色vDOMEq，表示需要更新。

C6節(jié)點(diǎn)，綠色SCU、紅色vDOMEq，表示需要更新。

C7節(jié)點(diǎn)，紅色SCU，表示不需要更新。

C8節(jié)點(diǎn)，綠色SCU，表示React需要渲染這個(gè)組件；綠色vDOMEq，表示虛擬DOM一致，不更新DOM。

因此，我們可以通過(guò)根據(jù)自己的業(yè)務(wù)特性，重載shouldComponentUpdate，只在確認(rèn)真實(shí)DOM需要改變時(shí)，再返回true。一般的做法是比較組件的props和state是否真的發(fā)生變化，如果發(fā)生變化則返回true，否則返回false。引用官網(wǎng)的案例。

`class CounterButton extends React.Component {`
`constructor(props) {`
`super``(props);`
`this``.state = {count: 1};`
`}`
`shouldComponentUpdate(nextProps, nextState) {`
`if` `(``this``.props.color !== nextProps.color) {`
`return` `true``;`
`}`
`if` `(``this``.state.count !== nextState.count) {`
`return` `true``;`
`}`
`return` `false``;`
`}`
`render() {`
`return` `(`
`` `this``.setState(state => ({count: state.count + 1}))}>`
`Count: {``this``.state.count}`
``
`);`
`}`
`}`

在以上代碼中，shouldComponentUpdate只檢查props.color和state.count的變化。如果這些值沒(méi)有變化，組件就不會(huì)更新。當(dāng)你的組件變得更加復(fù)雜時(shí)，你可以使用類似的模式來(lái)做一個(gè)“淺比較”，用來(lái)比較屬性和值以判定是否需要更新組件。這種模式十分常見(jiàn)，因此React提供了一個(gè)輔助對(duì)象來(lái)實(shí)現(xiàn)這個(gè)邏輯 - 繼承自React.PureComponent。

大部分情況下，你可以使用React.PureComponent而不必寫(xiě)你自己的shouldComponentUpdate，它只做一個(gè)淺比較。但是當(dāng)你比較的目標(biāo)為引用類型數(shù)據(jù)，淺比較會(huì)忽略屬性或狀態(tài)突變的情況，此時(shí)你不能使用它，此時(shí)你需要關(guān)注下面的不可突變數(shù)據(jù)。

附：數(shù)據(jù)突變（mutated）是指變量的引用沒(méi)有改變（指針地址未改變），但是引用指向的數(shù)據(jù)發(fā)生了變化（指針指向的數(shù)據(jù)發(fā)生變更）。例如const x = {foo:"foo"}。x.foo="none" 就是一個(gè)突變。

使用不可突變數(shù)據(jù)結(jié)構(gòu)

引用官網(wǎng)中的例子解釋一下突變數(shù)據(jù)產(chǎn)生的問(wèn)題。例如，假設(shè)你想要一個(gè)ListOfWords組件來(lái)渲染一個(gè)逗號(hào)分隔的單詞列表，并使用一個(gè)帶了點(diǎn)擊按鈕名字叫WordAdder的父組件來(lái)給子列表添加一個(gè)單詞。以下代碼并不正確：

`class ListOfWords extends React.PureComponent {`
`render() {`
`return` `
{``this``.props.words.join(``","``)}
;`
`}`
`}`
`class WordAdder extends React.Component {`
`constructor(props) {`
`super``(props);`
`this``.state = {`
`words: [``"marklar"``]`
`};`
`this``.handleClick =` `this``.handleClick.bind(``this``);`
`}`
`handleClick() {`
`// 這段內(nèi)容將會(huì)導(dǎo)致代碼不會(huì)按照你預(yù)期的結(jié)果運(yùn)行`
`const words =` `this``.state.words;`
words.push(``"marklar"``);`
`this``.setState({words: words});`
`}`
`render() {`
`return` `(`
`
`
``
``
`
`
`);`
`}`
`}`

導(dǎo)致代碼無(wú)法正常工作的原因是 PureComponent 僅僅對(duì) this.props.words的新舊值進(jìn)行“淺比較”。在words值在handleClick中被修改之后，即使有新的單詞被添加到數(shù)組中，但是this.props.words的新舊值在進(jìn)行比較時(shí)是一樣的（引用對(duì)象比較），因此 ListOfWords 一直不會(huì)發(fā)生渲染。
避免此類問(wèn)題最簡(jiǎn)單的方式是避免使用值可能會(huì)突變的屬性或狀態(tài)，如：
1、數(shù)組使用concat,對(duì)象使用Object.assign()

`handleClick() {`
`this``.setState(prevState => ({`
`words: prevState.words.concat([``"marklar"``])`
`}));`
`}`
`// 假設(shè)我們有一個(gè)叫colormap的對(duì)象，下面方法不污染原始對(duì)象`
`function` `updateColorMap(colormap) {`
`return` `Object.assign({}, colormap, {right:` `"blue"``});`
`}`

2、ES6支持?jǐn)?shù)組或?qū)ο蟮膕pread語(yǔ)法

`handleClick() {`
`this``.setState(prevState => ({`
`words: [...prevState.words,` `"marklar"``],`
`}));`
`};`
`function` `updateColorMap(colormap) {`
`return` `{...colormap, right:` `"blue"``};`
`}`

3、使用不可突變數(shù)據(jù)immutable.js

immutable.js使得變化跟蹤很方便。每個(gè)變化都會(huì)導(dǎo)致產(chǎn)生一個(gè)新的對(duì)象，因此我們只需檢查索引對(duì)象是否改變。

`const SomeRecord = Immutable.Record({ foo:` `null` `});`
`const x =` `new` `SomeRecord({ foo:` `"bar"` `});`
`const y = x.set(``"foo"``,` `"baz"``);`
`x === y;` `// false`

在這個(gè)例子中，x突變后返回了一個(gè)新的索引，因此我們可以安全的確認(rèn)x被改變了。

不可突變的數(shù)據(jù)結(jié)構(gòu)幫助我們輕松的追蹤對(duì)象變化，從而可以快速的實(shí)現(xiàn)shouldComponentUpdate。

具體如何使用可參考下面文章：Immutable 詳解及 React 中實(shí)踐

組件盡可能的進(jìn)行拆分、解耦

組件盡可能的細(xì)分，比如一個(gè)input+list組件，可以將list分成一個(gè)PureComponent，只在list數(shù)據(jù)變化時(shí)更新。否則在input值變化頁(yè)面重新渲染的時(shí)候，list也需要進(jìn)行不必要的DOM diff。
列表類組件優(yōu)化

key屬性在組件類之外提供了另一種方式的組件標(biāo)識(shí)。通過(guò)key標(biāo)識(shí)，在組件發(fā)生增刪改、排序等操作時(shí)，可以根據(jù)key值的位置直接調(diào)整DOM順序，告訴React 避免不必要的渲染而避免性能的浪費(fèi)。
例，對(duì)于一個(gè)基于排序的組件渲染：

`var` `items = sortBy(``this``.state.sortingAlgorithm,` `this``.props.items);`
`return` `items.map(``function``(item){`
`return` ``
`});`

當(dāng)順序發(fā)生改變時(shí)，React 會(huì)對(duì)元素進(jìn)行diff操作，并改img的src屬性。顯示，這樣的操作效率是非常低的。這時(shí)，我們可以為組件添加一個(gè)key屬性以唯一的標(biāo)識(shí)組件：
return
增加key后，React就不是diff，而是直接使用insertBefore操作移動(dòng)組件位置，而這個(gè)操作是移動(dòng)DOM節(jié)點(diǎn)最高效的辦法。
bind函數(shù)

綁定this的方式：一般有下面3種方式：

1、constructor綁定
`constructor(props) {`
`super``(props);`
`this``.handleClick =` `this``.handleClick.bind(``this``);` `//構(gòu)造函數(shù)中綁定`
`}`
`//然后可以`
`
`

2、使用時(shí)綁定

`<``p` `onClick={this.handleClick.bind(this)}>`

3、使用箭頭函數(shù)

`<``Test` `click={() => { this.handleClick() }}/>`

以上三種方法，第一種最優(yōu)。

因?yàn)榈谝环N構(gòu)造函數(shù)只在組件初始化的時(shí)候執(zhí)行一次，

第二種組件每次render都會(huì)執(zhí)行

第三種在每一次render時(shí)候都會(huì)生成新的箭頭函數(shù)。例：Test組件的click屬性是個(gè)箭頭函數(shù)，組件重新渲染的時(shí)候Test組件就會(huì)

因?yàn)檫@個(gè)新生成的箭頭函數(shù)而進(jìn)行更新，從而產(chǎn)生Test組件的不必要渲染。

不要濫用props

props盡量只傳需要的數(shù)據(jù)，避免多余的更新，盡量避免使用{...props}
ReactDOMServer進(jìn)行服務(wù)端渲染組件

為了用戶會(huì)更快速地看到完整渲染的頁(yè)面，可以采用服務(wù)端渲染技術(shù)，在此了解一下ReactDOMServer。

為了實(shí)現(xiàn)SSR，你可能會(huì)用nodejs框架（Express、Hapi、Koa）來(lái)啟動(dòng)一個(gè)web服務(wù)器，接著調(diào)用 renderToString 方法去渲染你的根組件成為字符串，最后你再輸出到 response。

`// using Express`
`import { renderToString } from` `"react-dom/server"``;`
`import MyPage from` `"./MyPage"``;`
`app.get(``"/"``, (req, res) => {`
`res.write(``""``);`
`res.write(``"
"``);`
`res.write(renderToString());`
`res.write(``"
"``);`
`res.end();`
`});`

客戶端使用render方法來(lái)生成HTML

import ReactDOM from "react-dom"`;`
import MyPage from "./MyPage"`;`
ReactDOM.render(, document.getElementById(`"app"`));
react性能檢測(cè)工具

react16版本之前，我們可以使用react-addons-perf工具來(lái)查看，而在最新的16版本，我們只需要在url后加上?react_pref。

首先來(lái)了解一下react-addons-perf。

react-addons-perf這是 React 官方推出的一個(gè)性能工具包，可以打印出組件渲染的時(shí)間、次數(shù)、浪費(fèi)時(shí)間等。

簡(jiǎn)單說(shuō)幾個(gè)api，具體用法可參考官網(wǎng)：

Perf.start() 開(kāi)始記錄

Perf.stop() 結(jié)束記錄

Perf.printInclusive() 查看所有設(shè)計(jì)到的組件render

Perf.printWasted() 查看不需要的浪費(fèi)組件render

再來(lái)了解一下，react16版本的方法，在url后加上?react_pref，就可以在chrome瀏覽器的performance，我們可以查看User Timeing來(lái)查看組件的加載時(shí)間。點(diǎn)擊record開(kāi)始記錄，注意記錄時(shí)長(zhǎng)不要超過(guò)20s，否則可能導(dǎo)致chrome掛起。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。