這篇文章給大家分享的是有關(guān)react的組件性能優(yōu)化方法有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的內(nèi)丘網(wǎng)站建設(shè)公司，內(nèi)丘接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行內(nèi)丘網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

react的組件性能優(yōu)化有：1、盡量多使用無(wú)狀態(tài)函數(shù)構(gòu)建組件；2、拆分組件為子組件，對(duì)組件做更細(xì)粒度的控制；3、運(yùn)用PureRender，對(duì)變更做出最少的渲染；4、運(yùn)用immutable。

react的組件性能優(yōu)化有：

1. 盡量多使用無(wú)狀態(tài)函數(shù)構(gòu)建組件

無(wú)狀態(tài)組件只有props和context兩個(gè)參數(shù)。它不存在state，沒(méi)有生命周期方法，組件本身即有狀態(tài)組件構(gòu)建方法中的render方法。

在合適的情況下，都應(yīng)該必須使用無(wú)狀態(tài)組件。無(wú)狀態(tài)組件不會(huì)像React.createClass和ES6 class會(huì)在調(diào)用時(shí)創(chuàng)建新實(shí)例，它創(chuàng)建時(shí)始終保持了一個(gè)實(shí)例，避免了不必要的檢查和內(nèi)存分配，做到了內(nèi)部?jī)?yōu)化。

2. 拆分組件為子組件，對(duì)組件做更細(xì)粒度的控制

相關(guān)重要概念： 純函數(shù)

純函數(shù)的三大構(gòu)成原則:

給定相同的輸入，它總是返回相同的輸出： 比如反例有 Math.random(), New Date()

過(guò)程沒(méi)有副作用：即不能改變外部狀態(tài)

沒(méi)有額外的狀態(tài)依賴(lài)：即方法內(nèi)部的狀態(tài)都只能在方法的生命周期內(nèi)存活，這意味著不能在方法內(nèi)使用共享的變量。

純函數(shù)非常方便進(jìn)行方法級(jí)別的測(cè)試及重構(gòu)，它可以讓程序具有良好的擴(kuò)展性及適應(yīng)性。純函數(shù)是函數(shù)式變成的基礎(chǔ)。

React組件本身就是純函數(shù)，即傳入指定props得到一定的Virtual DOM，整個(gè)過(guò)程都是可預(yù)測(cè)的。

具體辦法

拆分組件為子組件，對(duì)組件做更細(xì)粒度的控制。保持純凈狀態(tài)，可以讓方法或組件更加專(zhuān)注(focus)，體積更小(small)，更獨(dú)立(independent)，更具有復(fù)用性(reusability)和可測(cè)試性(testability)。

3. 運(yùn)用PureRender，對(duì)變更做出最少的渲染

相關(guān)重要概念: PureRender

PureRender的Pure即是指滿(mǎn)足純函數(shù)的條件，即組件被相同的props和state渲染會(huì)得到相同的結(jié)果。

在React中實(shí)現(xiàn)PureRender需要重新實(shí)現(xiàn)shouldComponentUpdate生命周期方法。shouldComponentUpdate是一個(gè)特別的方法，它接收需要更新的props和state，其本質(zhì)是用來(lái)進(jìn)行正確的組件渲染。當(dāng)其返回false的時(shí)候，不再向下執(zhí)行生命周期方法；當(dāng)其返回true時(shí)，繼續(xù)向下執(zhí)行。

組件在初始化過(guò)程中會(huì)渲染一個(gè)樹(shù)狀結(jié)構(gòu)，當(dāng)父節(jié)點(diǎn)props改變的時(shí)候，在理想情況下只需渲染一條鏈路上有關(guān)props改變的節(jié)點(diǎn)即可；但是，在默認(rèn)情況下shouldComponentUpdate方法返回true,React會(huì)重新渲染所有的節(jié)點(diǎn)。

有一些官方插件實(shí)現(xiàn)了對(duì)shouldComponentUpdate的重寫(xiě)，然后自己也可以做一些代碼的優(yōu)化來(lái)運(yùn)用PureRender。

具體辦法

(1) 運(yùn)用PureRender

使用官方插件react-addons-pure-render-mixin實(shí)現(xiàn)對(duì)shouldComponentUpdate的重寫(xiě)

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return 
foo
  }
}

它的原理是對(duì)object(包括props和state)做淺比較，即引用比較，非值比較。比如只用關(guān)注props中每一個(gè)是否全等(如果是prop是一個(gè)對(duì)象那就是只比較了地址，地址一樣就算是一樣了)，而不用深入比較。

(2)優(yōu)化PureRender

避免無(wú)論如何都會(huì)觸發(fā)shouldComponentUpdate返回true的代碼寫(xiě)法。

避免直接為prop設(shè)置字面量的數(shù)組和對(duì)象

就算每次傳入的數(shù)組或?qū)ο蟮闹禌](méi)有變，但它們的地址也發(fā)生了變化。

如以下寫(xiě)法每次渲染時(shí)style都是新對(duì)象都會(huì)觸發(fā)shouldComponentUpdate為true:

改進(jìn)辦法：將字面量設(shè)置為一個(gè)引用:

const defaultStyle = {};

避免每次都綁定事件

如果這樣綁定事件的話(huà)每次都要生成一個(gè)新的onChange屬性的值:

render() {
  return 
}

應(yīng)該盡量在構(gòu)造函數(shù)內(nèi)進(jìn)行綁定，如果綁定需要傳參那么應(yīng)該考慮抽象子組件或改變現(xiàn)有數(shù)據(jù)結(jié)構(gòu):

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}
handleChange() {
  ...
}
render() {
  return 
}

在設(shè)置子組件的時(shí)候要在父組件級(jí)別重寫(xiě)shouldComponentUpdate

4.運(yùn)用immutable

JavaScript中對(duì)象一般是可變的，因?yàn)槭褂靡觅x值，新的對(duì)象的改變將影響原始對(duì)象。為了解決這個(gè)問(wèn)題是使用深拷貝或者淺拷貝，但這樣做又造成了CPU和內(nèi)存的浪費(fèi)。

Immutable data很好地解決了這個(gè)問(wèn)題。

Immutable data就是一旦創(chuàng)建，就不能再更改的數(shù)據(jù)。對(duì)Immutable對(duì)象進(jìn)行修改、添加或刪除操作，都會(huì)返回一個(gè)新的Immutable對(duì)象。Immutable實(shí)現(xiàn)的原理是持久化的數(shù)據(jù)結(jié)構(gòu)。即使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時(shí)，保證新舊數(shù)據(jù)同時(shí)可用且不變。同時(shí)為了避免深拷貝帶來(lái)的性能損耗，Immutable使用了結(jié)構(gòu)共享(structural sharing),即如果對(duì)象樹(shù)中一個(gè)節(jié)點(diǎn)發(fā)生變化，只修改這個(gè)節(jié)點(diǎn)和受它影響的父節(jié)點(diǎn)，其他節(jié)點(diǎn)則進(jìn)行共享。

感謝各位的閱讀！關(guān)于react的組件性能優(yōu)化方法有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！