React組件里this指向了undefined原理解析
我的React組件里為什么this指向了undefined?
一.首先先嘮一嘮react事件中方法加不加()的問題
在原生js中我們綁定事件的時候是這樣子的,綁定的方法點擊的時候沒有加()這個時候控制臺是沒有反應(yīng)的,也就是說,事件沒有被觸發(fā)。
<button onclick="demo">點擊觸發(fā)</button> <script> function demo () { console.log("點擊了這個事件") } </script>
當(dāng)加上()后點擊就正常觸發(fā)執(zhí)行了,這是js觸發(fā)事件的規(guī)則。
<button onclick="demo()">點擊觸發(fā)</button> <script> function demo () { console.log("點擊了這個事件") } </script>
二.問題發(fā)生了
在我們寫React的類組件的時候發(fā)現(xiàn)了一個問題,問題就是,正常觸發(fā)事件的時候這個小括號就不用寫了,但是如果寫了,就算沒有點擊,也會觸發(fā)這個事件,因為在react的jsx語法中,從{}開始就相當(dāng)于js表達(dá)式開始了,在js表達(dá)式中加了()相當(dāng)于是調(diào)用函數(shù)了,不加是當(dāng)我們點擊的時候,讓react為我們加上()
import React from "react" //類組件 class Demos extends React.Component { state = { count: 0, } changeNum () { console.log(this) } render () { return ( <> <div>{this.state.count}</div> <button onClick={this.changeNum()}>點擊修改數(shù)據(jù)</button> </> ) } } function App () { return ( <div className="App"> <div> <Demos></Demos> </div> </div> ) } export default App
但是問題接踵而至,我們?nèi)サ袅诵±ㄌ?,但是此后this的指向變成了undefined,
三.自我反省
我懷疑可能是我js關(guān)于this指向的問題學(xué)的不太扎實
this指向:
普通函數(shù)或者作為對象屬性,指向window對象
事件綁定中指向綁定事件的元素
<body> <button onclick="demo()">點擊觸發(fā)</button> </body> <script> function demo () { console.log("點擊了這個事件", this) } </script>
- 但是需要注意的是,這里我們是在用戶點擊時,瀏覽器幫我們將點擊事件的
this
指向綁定該事件的DOM
元素。如果通過代碼來觸發(fā)對應(yīng)的事件的話,我們可以通過call/apply/bind
來指定其
也就是說當(dāng)我們通過一個按鈕去觸發(fā)事件的時候,事件中的this指向的是window,所以我們對比著去理解也就明白了為什么React中指向的是undefined,因為React中指向的window,但是我們想讓它指向的是當(dāng)前的類組件的實例,所以babel嚴(yán)格模式下就指向了undefined。
構(gòu)造函數(shù)中this指向類的實例。
箭頭函數(shù)中指向的是父級函數(shù)的上下文中的this。
call,apply,bind指向的是傳入的第一個參數(shù)。
四.解決React中函數(shù)指向的問題
推薦使用 class field的方式
class Demos extends React.Component { state = { count: 0, } changeNum= ()=> { console.log(this) } render () { return ( <> <div>{this.state.count}</div> <button onClick={this.changeNum}>點擊修改數(shù)據(jù)</button> </> ) } }
使用bind(this)的方式解決【了解即可】
使用箭頭函數(shù)方式解決【了解即可】
以上就是React組件里this指向了undefined原理解析的詳細(xì)內(nèi)容,更多關(guān)于React組件this指向undefined的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
在React框架中實現(xiàn)一些AngularJS中ng指令的例子
這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下2016-03-03React Native之prop-types進(jìn)行屬性確認(rèn)詳解
本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12React利用lazy+Suspense實現(xiàn)路由懶加載
這篇文章主要為大家詳細(xì)介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06