摘要：單個組件性能優化里面盡量減少新建變量和函數的使用，盡量減少傳遞參數的數量在中綁定函數，無非就是下面三種第一種是在構造函數中綁定，第二種是在函數里面綁定，第三種就是使用箭頭函數，上述方法都能實現的綁定。

在render中綁定函數，無非就是下面三種：

render() {
  return (
    

      1
      2
      this.handleClick()}>3
    
  )
}

第一種是在構造函數中綁定this，第二種是在render()函數里面綁定this，第三種就是使用箭頭函數，上述方法都能實現this的綁定。

但是哪一種方法的性能最好，是我們要考慮的問題。毫無疑問第一種的性能最好。

第一種方法，構造函數每渲染一次便會執行一遍；

第二種方法，在每次render()的時候都會重新執行一遍函數；

第三種方法，每一次render()的時候，都會生成一個新的箭頭函數，即使兩個箭頭函數的內容是一樣的。

react判斷是否需要進行render是淺層比較，簡單來說就是通過===來判斷的，如果state或者prop的類型是字符串或者數字，只要值相同，那么淺層比較就會認為其相同；

但是如果前者的類型是復雜的對象的時候，我們知道對象是引用類型，淺層比較只會認為這兩個prop是不是同一個引用，如果不是，哪怕這兩個對象中的內容完全一樣，也會被認為是兩個不同的prop。

舉個例子：

當我們給組件App名為style的prop賦值；

使用這種方法，每一次渲染都會被認為是一個style這個prop發生了變化，因為每一次都會產生一個對象給style。
如果想要讓react渲染的時候認為前后對象類型prop相同，則必須要保證prop指向同一個javascript對象，改進如下：
const appStyle = { color: "red" }; //這個初始化只執行一次，不要放在render中，可以放在構造函數中

1.2 定制shouldComponentUpdate函數
生命周期函數shouldComponentUpdate是決定react組件什么時候能夠重新渲染的函數，但是這個函數默認的實現方式就是簡單的返回一個true。也就是說，默認每次更新的時候都要調用所用的生命周期函數，包括render函數，重新渲染。
看看下面這個例子：
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count = 2,
      name = "apple",
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleName = this.handleName.bind(this);
  }
  this.handleClick() {
  // ...
  }
  this.handleName() {
  // ...
  }
  render() {
    return (
      

        數量，{this.state.count}
        改變數量
        改變名字
        
      
    );
  }
}


class Child extends React.Component {
  render() {
    console.log("render了一次");
    return (
      
我想吃，{this.props.title}
    );
  }
}
我們寫了兩個組件，App和Child組件，并寫兩個方法，一個改變App中的count的值，一個是改變name，我們在Child的render中打印了每次是否執行。
不出意外，雖然Child組件里的title值沒有改變，但是還是render了。
為了進一步優化這個問題，我們這樣改Child組件：
class Child extends React.Component {
  shouldComponentUpdate(nextProps,nextState) {
    if(nextProps.title == this.props.title) {
      return false;
    }
    return true;
  }

  render() {
    console.log("render了一次");
    return (
      
我想吃，{this.props.title}
    );
  }
}
只有當Child的title值發生改變的時候，組件才會去render。
在最新的react中，react給我們提供了React.PureComponent，官方也在早期提供了名為react-addons-pure-render-mixin插件來重新實現shouldComponentUpdate生命周期方法。
class Child extends React.PureComponent {
  // shouldComponentUpdate(nextProps,nextState) {
  //   if(nextProps.title == this.props.title) {
  //     return false;
  //   }
  //   return true;
  // }

  render() {
    console.log("render了一次");
    return (
      
我想吃，{this.props.title}
    );
  }
}
通過上述的方法的效果也是和我們先前定制shouldComponentUpdate的效果是一致的。
但是我們要注意的是，這里的PureRender是淺比較的，因為深比較的場景是相當昂貴的。所以我們要注意我們在1.1中說到的一些注意點：不要直接為props設置對象或者數組、不要將方法直接綁定在元素上，因為其實函數也是對象。
1.3 Immutable.js
javascript中的對象一般都是可變的，因為使用了引用賦值，新的對象簡單的引用了原始對象，改變新對象將影響到原始對象。
舉個例子：
student = { age : 1 };
school = student;
school.age = 2;
當我們給school.age賦值后，會發現student.a也變成了2，雖然我們可以通過深拷貝與淺拷貝解決這個問題，但是這樣做非常的昂貴，對cpu和內存會造成浪費。
這里就需要用到Immutable，通過Immutable創建的Immutable Data一旦被創建，就不能再更改。對Immutable對象進行修改、添加或刪除操作，都會返回一個新的Immutable對象。
下面是三個比較重要且用到的數據結構

Map：鍵值對集合，對應Object，ES6中也有專門的Map對象
List：有序可重復列表，對應于Array
ArraySet：有序且不可重復的列表

我們可以看一個例子：
使用Map生成一個immutable對象：
import { Map, is } from "immutable";

let a = Map({
  "name": "apple",
  "list": Map({name: "orange"})
})

let b = a.set("name","banana");

console.log(a.get("course") === b.get("course")); // 返回true
console.log(a === b); // 返回false
Immutable.is 比較的是兩個對象的 hashCode 或 valueOf（對于JavaScript對象）。由于immutable內部使用了Trie數據結構來存儲，只要兩個對象的 hashCode 相等，值就是一樣的。這樣的算法避免了深度遍歷比較，性能非常好。
Immutable優點：

減少內存的使用
并發安全
降低項目的復雜度
便于比較復雜數據，定制shouldComponentUpdate方便
時間旅行功能
函數式編程

Immutable缺點：

學習成本
庫的大小（建議使用seamless-immutable）
對現有項目入侵嚴重
容易與原生的對象進行混淆

2. 多個react組件性能優化
react組件在裝載過程中，react通過在render方法在內存中產生一個樹形結構，樹上的節點代表一個react組件或者原生的Dom元素，這個樹形結構就是我們所謂的Vitural Dom，react根據這個來渲染產生瀏覽器的Dom樹。
react在更新階段對比原有的Vitural Dom和新生成的Vitural Dom，找出不同之處，在根據不同來渲染Dom樹。
react為了追求高性能，采用了時間復雜度為O(N)來比較兩個屬性結構的區別，因為要確切比較兩個樹形結構，需要通過O(N^3)，這會降低性能。
節點類型不同
// A組件

  


// B組件

  

我們想把A組件更新成B組件，react在做比較的時候，發現最外面的根結點完全不一樣，直接銷毀之前的
節點，包括里面的子節點也一并銷毀，這是一個巨大的浪費，但是為了避免O(N^3)的時間復雜度，只能采用這種方式。

所以在開發過程中，我們應該盡量避免上面的情況，不要將包裹節點的類型隨意改變。
兩個節點類型一樣
這里包括兩種情況，一種是節點是Dom類型，還有一種react組件。
對于dom類型，我們舉個例子：
// A組件

  Hello World!!!


// B組件

  Good Bye!!!

上述A和B組件的區別是文字、className、style中的color發生改變，因為Dom元素沒變，React只會修改他變化的部分。
針對react組件類型，渲染無非就是再執行一遍組件實例的更新過程，最主要的就是定制shouldComponentUpdate。
多個子組件情況
例子一：
// A

  
  


// B

  
  
  

從A變到B，如果shouldComponentUpdate處理得當，我們只需要更新裝載third的那一次就行。
我們來看看下一個例子：
// A

  
  


// B

  
  
  

這里因為react是采用O(n)的時間復雜度，所以會依次將text為First的改為Zero，text為Second改為First，在最后再加上一個組件，text為Second。現存的兩個的text的屬性都被改變了，所以會依次渲染。
如果我們這里有100個實例，那么就會發生100次更新。
這里我們就要用到Key了
簡單來說，其實這一個Key就是react組件的身份證號。
我們將上一個例子改成如下，就可以避免上面的問題了，react就能夠知道其實B里面的第二個和第三個組件其實就是A中的第一個和第二個實例。
// A

  
  


// B

  
  
  

不過現在，react也會提醒我們不要忘記使用key，如果沒有加，瀏覽器中會報錯。
關于key的使用我們要注意的是，這個key值要穩定不變的，就如同身份證號對于我們是穩定不變的一樣。
一個常見的錯誤就是，拿數組的的下標值去當做key，這個是很危險的，代碼如下，我們一定要避免

  {
    todos.map((item, index) => {
      
    })
  }

未完待續...
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務器
                                             
                         GPU云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               前端開發性能優化
                                                                                                           前端性能優化
                                                                                                           學習前端開發
                                                                                                           前端開發學習
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105573.html
               
                      
               

                 
                                  
上一篇：React學習之初入React世界
  
                                                
                                       
下一篇：ES6（上中）