這篇文章主要介紹了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##可以看到:
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中呼叫自訂的元件方法,並在該方法中取得群組將實例,我們就得進行轉換上下文即綁定上下文:
自動綁定和手動綁定
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中文網其他相關文章!