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( <div> <h1>hello World</h1> <label htmlFor = 'btn'>單擊打印函數handler中this的指向</label> <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/> </div> ) }}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( <div> <h1>hello World</h1> <label htmlFor = 'btn'>單擊打印函數handler中this的指向</label> <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/> </div> ) }}export default App
可以看到：
繼續使用事件觸發組件的裝載、更新和卸載過程：
/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> <div id="root"> <!-- app --> </div></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中調用自定義的組件方法，并在該方法中獲取組將實例，我們就得進行轉換上下文即綁定上下文：
自動綁定和手動綁定
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( <div> <h1>hello World</h1> <label htmlFor = 'btn'>單擊打印函數handler中this的指向</label> <input id = "btn" type="button" value = '單擊' onClick = {this.handler}/> </div> ) }}export default App將this.handler()綁定為組件實例后，this.handler()中的this就指向組將實例，即onClick={this.handler}打印出來的為組件實例；
總結：
React組件生命周期函數中的this指向組件實例；
自定義組件方法的this會因調用者不同而不同；
為了在組件的自定義方法中獲取組件實例，需要手動綁定this到組將實例。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
