在React元件中詳細講解this的使用方法。-js教程-PHP中文網

首頁

web前端

js教程

在React元件中詳細講解this的使用方法。

亚连

Jun 02, 2018 pm 05:18 PM

reactthis講解

這篇文章主要介紹了React組件中的this的具體使用，現在分享給大家，也給大家做個參考。

React元件的this是什麼

透過寫一個簡單元件，並且渲染出來，分別列印出自訂函數和render中的this：

import React from &#39;react&#39;;

const STR = &#39;被调用，this指向：&#39;;

class App extends React.Component{
  constructor(){
    super()
  }

  //测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){

    console.log(`render ${STR}`,this);
    return(
      <p>
        <h1 id="hello-nbsp-World">hello World</h1>
        <label htmlFor = &#39;btn&#39;>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = &#39;单击&#39; onClick = {this.handler}/>
      </p>    
    )
  }
}
export default App

結果如圖：

可以看到，render函數中的this指向了元件實例，而handler（）函數中的this則為undefined，這是為何？

JavaScript函數中的this

我們都知道JavaScript函數中的this不是在函數宣告的時候定義的，而是在函數呼叫（即執行）的時候定義的

var student = {
  func: function() {
    console.log(this);
  };
};

student.func();
var studentFunc = student.func;
studentFunc();

這段程式碼運行，可以看到student.func()列印了student對象，因為此時this指向student物件；而studentFunc()列印了window，因為此時由window調用的，this指向window。

這段程式碼形象的驗證了，JavaScript函數中的this不是在函數宣告的時候，而是在函數運行的時候定義的；

#同樣，React元件也遵循JavaScript的這個特性，所以元件方法的'呼叫者'不同會導致this的不同（這裡的「呼叫者」指的是函數執行時的目前物件）

「呼叫者」不同導致this不同

測試：分別在元件自帶的生命週期函數以及自訂函數中列印this，並在render（）方法中分別使用this.handler(),window.handler() ,onCilck={this.handler}這三種方法呼叫handler（）：

/App.jsx

 //测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);

    this.handler();
    window.handler = this.handler;
    window.handler();

    return(

      <p>
        <h1 id="hello-nbsp-World">hello World</h1>
        <label htmlFor = &#39;btn&#39;>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = &#39;单击&#39; onClick = {this.handler}/>
      </p>    
    )
  }
}
export default App

##可以看到：

render中this -> 元件實例App物件；
#render中this.handler() -> 元件實例App物件;
render中window.handler() -> window物件；
onClick ={this.handler} -> undefined

繼續使用事件觸發元件的裝載、更新和卸載過程：

/index.js

import React from &#39;react&#39;
import {render,unmountComponentAtNode} from &#39;react-dom&#39;

import App from &#39;./App.jsx&#39;


const root=document.getElementById(&#39;root&#39;)

console.log("首次挂载");
let instance = render(<App />,root);

window.renderComponent = () => {
  console.log("挂载");
  instance = render(<App />,root);
}

window.setState = () => {
  console.log("更新");
  instance.setState({foo: &#39;bar&#39;});
}


window.unmountComponentAtNode = () => {
  console.log(&#39;卸载&#39;);
  unmountComponentAtNode(root);
}

使用三個按鈕觸發元件的裝載、更新和卸載過程：

/index.html

<!DOCTYPE html>
<html>
<head>
  <title>react-this</title>
</head>
<body>
  <button onclick="window.renderComponent()">挂载</button>
  <button onclick="window.setState()">更新</button>
  <button onclick="window.unmountComponentAtNode()">卸载</button>
  <p id="root">
    <!-- app -->
  </p>
</body>
</html>

運行程序，依序點擊“掛載”，綁定onClick={this.handler}“點擊”按鈕，“更新”和“卸載」按鈕結果如下：

1. render()以及componentDIdMount()、componentDIdUpdate()等其他生命週期函數中的this都是元件實例；

2. this.handler()的呼叫者，為render（）中的this，所以打印組件實例；

3. window.handler()的“調用者”，為window，所以打印window;

4. onClick={this.handler}的「呼叫者」為事件綁定，來源多樣，這裡印出undefined。

-面對如此混亂的場景，如果我們想在onClick中呼叫自訂的元件方法，並在該方法中取得群組將實例，我們就得進行轉換上下文即綁定上下文：

自動綁定和手動綁定

React.createClass有一個內建的魔法，可以自動綁定所使用的方法，使得其this指向元件的實例化對象，但是其他JavaScript類別並沒有這種特性；
所以React團隊決定不再React元件類別中實作自動綁定，把上下文轉換的自由權交給開發者；

所以我們通常在建構子中綁定方法的this指向：

import React from &#39;react&#39;;
const STR = &#39;被调用，this指向：&#39;;
class App extends React.Component{
  constructor(){
    super();
    this.handler = this.handler.bind(this);
  }
//测试函数
  handler() {
    console.log(`handler ${STR}`,this);
  }

  render(){
    console.log(`render ${STR}`,this);
    this.handler();
    window.handler = this.handler;
    window.handler();

    return(
      <p>
        <h1 id="hello-nbsp-World">hello World</h1>
        <label htmlFor = &#39;btn&#39;>单击打印函数handler中this的指向</label>
        <input id = "btn" type="button" value = &#39;单击&#39; onClick = {this.handler}/>
      </p>    
    )
  }
}
export default App

總結：

React元件生命週期函數中的this指向元件實例；

自訂元件方法的this會因呼叫者不同而不同；

為了在元件的自訂方法中取得元件實例，需要手動綁定this到群組將實例。

上面是我整理給大家的，希望今後對大家有幫助。

vue取得目前啟動路由的方法

vue中實作先請求資料再渲染dom分享

解決vue頁面DOM操作不生效的問題

以上是在React元件中詳細講解this的使用方法。的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。