JavaScript中一個(gè)不被重視的概念是對(duì)象和函數(shù)是如何引用的，并且直接影響 React性能。 如果創(chuàng)建兩個(gè)完全相同的函數(shù)，它們?nèi)匀徊幌嗟?，試試下面的例子?/p>

const functionOne = function() { alert('Hello world!'); };  
const functionTwo = function() { alert('Hello world!'); };  
functionOne === functionTwo; // false 

但是，如果將變量指向一個(gè)已存在的函數(shù)，看看它們的差異：

const functionThree = function() { alert('Hello world!'); };  
const functionFour = functionThree;  
functionThree === functionFour; // true 

對(duì)象的工作方式也是一樣的。

const object1 = {}; 
const object2 = {}; 
const object3 = object1; 
object1 === object2; // false 
object1 === object3; // true 

如果人有其他語言的經(jīng)驗(yàn)，你可能熟悉指針。每次創(chuàng)建一個(gè)對(duì)象，計(jì)算機(jī)會(huì)為這個(gè)對(duì)象分配了一些內(nèi)存。當(dāng)聲明 object1 ={} 時(shí)，已經(jīng)在用戶電腦中的 RAM(隨機(jī)存取存儲(chǔ)器) 中創(chuàng)建了一個(gè)專門用于object1 的字節(jié)塊?？梢詫?object1 想象成一個(gè)地址，其中包含其鍵-值對(duì)在 RAM 中的位置。

當(dāng)聲明 object2 ={} 時(shí)，在用戶的電腦中的 RAM 中創(chuàng)建了一個(gè)專門用于 object2 的不同字節(jié)塊。object1 的地址與 object2 的地址是不一樣的。這就是為什么這兩個(gè)變量的等式檢查沒有通過的原因。它們的鍵值對(duì)可能完全相同，但是內(nèi)存中的地址不同，這才是會(huì)被比較的地方。

當(dāng)我賦值 object3 = object1 時(shí)，我將 object3 的值賦值為 object1 的地址，它不是一個(gè)新對(duì)象。它們?cè)趦?nèi)存中的位置是相同的，可以這樣驗(yàn)證:

const object1 = { x: true };  
const object3 = object1;  
object3.x = false;  
object1.x; // false 

在本例中，我在內(nèi)存中創(chuàng)建了一個(gè)對(duì)象并取名為 object1。然后將 object3 指向 object1 這時(shí)它們的內(nèi)存的地址中是相同的。

通過修改 object3，可以改變對(duì)應(yīng)內(nèi)存中的值，這也意味著所有指向該內(nèi)存的變量都會(huì)被修改。obect1 的值也被改變了。

對(duì)于初級(jí)開發(fā)人員來說，這是一個(gè)非常常見的錯(cuò)誤，可能需要一個(gè)更別深入的教程，但是本廣是關(guān)于React 性能的，只是本文是討論 React 性能的，甚至是對(duì)變量引用有較深資歷的開發(fā)者也可能需要學(xué)習(xí)。

這與 React 有什么關(guān)系? React 有一種節(jié)省處理時(shí)間以提高性能的智能方法：如果組件的 props 和 state 沒有改變，那么render 的輸出也一定沒有改變。 顯然，如果所有的都一樣，那就意味著沒有變化，如果沒有任何改變，render 必須返回相同的輸出，因此我們不必執(zhí)行它。 這就是 React 快速的原因，它只在需要時(shí)渲染。

React 采用和 JavaScript 一樣的方式，通過簡單的 == 操作符來判斷 props 和 state 是否有變化。 React不會(huì)深入比較對(duì)象以確定它們是否相等。淺比較用于比較對(duì)象的每個(gè)鍵值對(duì)，而不是比較內(nèi)存地址。深比較更進(jìn)一步，如果鍵-值對(duì)中的任何值也是對(duì)象，那么也對(duì)這些鍵-值對(duì)進(jìn)行比較。React 都不是:它只是檢查引用是否相同。

如果要將組件的 prop 從 {x：1} 更改為另一個(gè)對(duì)象 {x：1}，則 React 將重新渲染，因?yàn)檫@兩個(gè)對(duì)象不會(huì)引用內(nèi)存中的相同位置。 如果要將組件的 prop 從 object1(上面的例子)更改為 o bject3，則 React 不會(huì)重新呈現(xiàn)，因?yàn)檫@兩個(gè)對(duì)象具有相同的引用。

在 JavaScript 中，函數(shù)的處理方式是相同的。如果 React 接收到具有不同內(nèi)存地址的相同函數(shù)，它將重新呈現(xiàn)。如果 React 接收到相同的函數(shù)引用，則不會(huì)。

不幸的是，這是我在代碼評(píng)審過程中遇到的常見場景:

class SomeComponent extends React.PureComponent { 
  get instructions () { 
    if (this.props.do) { 
      return 'click the button: ' 
    } 
    return 'Do NOT click the button: ' 
  } 
 
  render() { 
    return ( 
      <div> 
        {this.instructions} 
        <Button onClick={() => alert('!')} /> 
      </div> 
    ) 
  } 
} 

這是一個(gè)非常簡單的組件。 有一個(gè)按鈕，當(dāng)它被點(diǎn)擊時(shí)，就 alert。 instructions 用來表示是否點(diǎn)擊了按鈕，這是通過 SomeComponent 的 prop 的 do={true} 或 do={false} 來控制。

這里所發(fā)生的是，每當(dāng)重新渲染 SomeComponent 組件(例如 do 從 true 切換到 false)時(shí)，按鈕也會(huì)重新渲染，盡管每次 onClick 方法都是相同的，但是每次渲染都會(huì)被重新創(chuàng)建。

每次渲染時(shí)，都會(huì)在內(nèi)存中創(chuàng)建一個(gè)新函數(shù)(因?yàn)樗窃?render 函數(shù)中創(chuàng)建的)，并將對(duì)內(nèi)存中新地址的新引用傳遞給<Button />，雖然輸入完全沒有變化，該 Button 組件還是會(huì)重新渲染。

修復(fù)

如果函數(shù)不依賴于的組件(沒有 this 上下文)，則可以在組件外部定義它。 組件的所有實(shí)例都將使用相同的函數(shù)引用，因?yàn)樵摵瘮?shù)在所有情況下都是相同的。

const createAlertBox = () => alert('!'); 
 
class SomeComponent extends React.PureComponent { 
 
  get instructions() { 
    if (this.props.do) { 
      return 'Click the button: '; 
    } 
    return 'Do NOT click the button: '; 
  } 
 
  render() { 
    return ( 
      <div> 
        {this.instructions} 
        <Button onClick={createAlertBox} /> 
      </div> 
    ); 
  } 
} 

和前面的例子相反，createAlertBox 在每次渲染中仍然有著有相同的引用，因此按鈕就不會(huì)重新渲染了。

雖然 Button 是一個(gè)小型，快速渲染的組件，但你可能會(huì)在大型，復(fù)雜，渲染速度慢的組件上看到這些內(nèi)聯(lián)定義，它可能會(huì)讓你的 React 應(yīng)用程序陷入囧境，所以***不要在 render 方法中定義這些函數(shù)。

如果函數(shù)確實(shí)依賴于組件，以至于無法在組件外部定義它，你可以將組件的方法作為事件處理傳遞過去:

class SomeComponent extends React.PureComponent { 
 
  createAlertBox = () => { 
    alert(this.props.message); 
  }; 
 
  get instructions() { 
    if (this.props.do) { 
      return 'Click the button: '; 
    } 
    return 'Do NOT click the button: '; 
  } 
 
  render() { 
    return ( 
      <div> 
        {this.instructions} 
        <Button onClick={this.createAlertBox} /> 
      </div> 
    ); 
  } 
} 

在這種情況下，SomeComponent 的每個(gè)實(shí)例都有一個(gè)不同的警告框。 Button 的click事件偵聽器需要獨(dú)立于 SomeComponent。 通過傳遞 createAlertBox 方法，它就和 SomeComponent 重新渲染無關(guān)了，甚至和 message 這個(gè)屬性是否修改也沒有關(guān)系。createAlertBox 內(nèi)存中的地址不會(huì)改變，這意味著 Button 不需要重新渲染，節(jié)省了處理時(shí)間并提高了應(yīng)用程序的渲染速度

但如果函數(shù)是動(dòng)態(tài)的呢?

修復(fù)(高級(jí))

這里有個(gè)非常常見的使用情況，在簡單的組件里面，有很多獨(dú)立的動(dòng)態(tài)事件監(jiān)聽器，例如在遍歷數(shù)組的時(shí)候：

class SomeComponent extends React.PureComponent { 
  render() { 
    return ( 
      <ul> 
        {this.props.list.map(listItem => 
          <li key={listItem.text}> 
            <Button onClick={() => alert(listItem.text)} /> 
          </li> 
        )} 
      </ul> 
    ); 
  } 
} 

在本例中，有一個(gè)可變數(shù)量的按鈕，生成一個(gè)可變數(shù)量的事件監(jiān)聽器，每個(gè)監(jiān)聽器都有一個(gè)獨(dú)特的函數(shù)，在創(chuàng)建 SomeComponent 時(shí)不可能知道它是什么。怎樣才能解決這個(gè)難題呢?

輸入記憶，或者簡單地稱為緩存。 對(duì)于每個(gè)唯一值，創(chuàng)建并緩存一個(gè)函數(shù); 對(duì)于將來對(duì)該唯一值的所有引用，返回先前緩存的函數(shù)。

這就是我將如何實(shí)現(xiàn)上面的示例。

class SomeComponent extends React.PureComponent { 
  // SomeComponent的每個(gè)實(shí)例都有一個(gè)單擊處理程序緩存，這些處理程序是惟一的。 
 
  clickHandlers = {}; 
 
  // 在給定唯一標(biāo)識(shí)符的情況下生成或返回單擊處理程序。 
  getClickHandler(key) { 
    // 如果不存在此唯一標(biāo)識(shí)符的單擊處理程序，則創(chuàng)建 
    if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) { 
      this.clickHandlers[key] = () => alert(key); 
    } 
    return this.clickHandlers[key]; 
  } 
  render() { 
    return ( 
      <ul> 
        {this.props.list.map(listItem => 
          <li key={listItem.text}> 
            <Button onClick={this.getClickHandler(listItem.text)} /> 
          </li> 
        )} 
      </ul> 
    ); 
  } 
} 

數(shù)組中的每一項(xiàng)都通過 getClickHandler 方法傳遞。所述方法將在***次使用值調(diào)用它時(shí)創(chuàng)建該值的唯一函數(shù)，然后返回該函數(shù)。以后對(duì)該方法的所有調(diào)用都不會(huì)創(chuàng)建一個(gè)新函數(shù);相反，它將返回對(duì)先前在內(nèi)存中創(chuàng)建的函數(shù)的引用。

因此，重新渲染 SomeComponent 不會(huì)導(dǎo)致按鈕重新渲染。類似地，相似的，在 list 里面添加項(xiàng)也會(huì)為按鈕動(dòng)態(tài)地創(chuàng)建事件監(jiān)聽器。

當(dāng)多個(gè)處理程序由多個(gè)變量確定時(shí)，可能需要使用自己的聰明才智為每個(gè)處理程序生成唯一標(biāo)識(shí)符，但是在遍歷里面，沒有比每個(gè) JSX 對(duì)象生成的 key 更簡單得了。

這里使用 index 作為唯一標(biāo)識(shí)會(huì)有個(gè)警告：如果列表更改順序或刪除項(xiàng)目，可能會(huì)得到錯(cuò)誤的結(jié)果。

當(dāng)數(shù)組從 ['soda'，'pizza'] 更改為 ['pizza'] 并且已經(jīng)緩存了事件監(jiān)聽器為 listeners[0] = () => alert('soda') ，您會(huì)發(fā)現(xiàn) 用戶點(diǎn)擊提醒蘇打水的披薩的now-index-0按鈕。 但點(diǎn)擊 index 為 0 的按鈕 pizza 的時(shí)候，它將會(huì)彈出 soda。這也是 React 建議不要使用數(shù)組的索引作為 key 的原因。