這篇文章主要介紹了React組件中的this的具體使用，現在分享給大家，也給大家做個參考。
React元件的this是什麼
透過寫一個簡單元件，並且渲染出來，分別列印出自訂函數和render中的this：
import React from 'react';
const STR = '被调用，this指向：';
class App extends React.Component{
constructor(){
super()
}
//测试函数
handler() {
console.log(`handler ${STR}`,this);
}
render(){
console.log(`render ${STR}`,this);
return(
<p>
<h1>hello World</h1>
<label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' 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>hello World</h1>
<label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' 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 'react'
import {render,unmountComponentAtNode} from 'react-dom'
import App from './App.jsx'
const root=document.getElementById('root')
console.log("首次挂载");
let instance = render(<App />,root);
window.renderComponent = () => {
console.log("挂载");
instance = render(<App />,root);
}
window.setState = () => {
console.log("更新");
instance.setState({foo: 'bar'});
}
window.unmountComponentAtNode = () => {
console.log('卸载');
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 'react';
const STR = '被调用，this指向：';
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>hello World</h1>
<label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
<input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
</p>
)
}
}
export default App登入後複製
React元件生命週期函數中的this指向元件實例；
自訂元件方法的this會因呼叫者不同而不同；
為了在元件的自訂方法中取得元件實例，需要手動綁定this到群組將實例。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
vue取得目前啟動路由的方法
vue中實作先請求資料再渲染dom分享
解決vue頁面DOM操作不生效的問題
以上是在React元件中詳細講解this的使用方法。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
