快捷導(dǎo)航

React組件里this指向了undefined原理解析

更新時(shí)間：2023年03月05日 10:56:27 作者：舉個(gè)栗子兒

這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

我的React組件里為什么this指向了undefined？

一.首先先嘮一嘮react事件中方法加不加()的問(wèn)題

在原生js中我們綁定事件的時(shí)候是這樣子的，綁定的方法點(diǎn)擊的時(shí)候沒(méi)有加()這個(gè)時(shí)候控制臺(tái)是沒(méi)有反應(yīng)的，也就是說(shuō)，事件沒(méi)有被觸發(fā)。

<button onclick="demo">點(diǎn)擊觸發(fā)</button>
<script>
  function demo () {
    console.log("點(diǎn)擊了這個(gè)事件")
  }
</script>

當(dāng)加上()后點(diǎn)擊就正常觸發(fā)執(zhí)行了，這是js觸發(fā)事件的規(guī)則。

 <button onclick="demo()">點(diǎn)擊觸發(fā)</button>
<script>
  function demo () {
    console.log("點(diǎn)擊了這個(gè)事件")
  }
</script>

二.問(wèn)題發(fā)生了

在我們寫(xiě)React的類(lèi)組件的時(shí)候發(fā)現(xiàn)了一個(gè)問(wèn)題，問(wèn)題就是，正常觸發(fā)事件的時(shí)候這個(gè)小括號(hào)就不用寫(xiě)了，但是如果寫(xiě)了，就算沒(méi)有點(diǎn)擊，也會(huì)觸發(fā)這個(gè)事件，因?yàn)樵?a rel="external nofollow" target="_blank">react的jsx語(yǔ)法中，從{}開(kāi)始就相當(dāng)于js表達(dá)式開(kāi)始了，在js表達(dá)式中加了()相當(dāng)于是調(diào)用函數(shù)了，不加是當(dāng)我們點(diǎn)擊的時(shí)候，讓react為我們加上()

import React from "react"
//類(lèi)組件
class Demos extends React.Component {
  state = {
    count: 0,
  }
  changeNum () {
    console.log(this)
  }
  render () {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.changeNum()}>點(diǎn)擊修改數(shù)據(jù)</button>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <div>
        <Demos></Demos>
      </div>
    </div>
  )
}
export default App

但是問(wèn)題接踵而至，我們?nèi)サ袅诵±ㄌ?hào)，但是此后this的指向變成了undefined，

三.自我反省

我懷疑可能是我js關(guān)于this指向的問(wèn)題學(xué)的不太扎實(shí)

this指向：

普通函數(shù)或者作為對(duì)象屬性，指向window對(duì)象

事件綁定中指向綁定事件的元素

<body>
  <button onclick="demo()">點(diǎn)擊觸發(fā)</button>
</body>
<script>
  function demo () {
    console.log("點(diǎn)擊了這個(gè)事件", this)
  }
</script>

但是需要注意的是，這里我們是在用戶(hù)點(diǎn)擊時(shí)，瀏覽器幫我們將點(diǎn)擊事件的this指向綁定該事件的DOM元素。如果通過(guò)代碼來(lái)觸發(fā)對(duì)應(yīng)的事件的話(huà)，我們可以通過(guò)call/apply/bind來(lái)指定其

也就是說(shuō)當(dāng)我們通過(guò)一個(gè)按鈕去觸發(fā)事件的時(shí)候，事件中的this指向的是window，所以我們對(duì)比著去理解也就明白了為什么React中指向的是undefined，因?yàn)镽eact中指向的window，但是我們想讓它指向的是當(dāng)前的類(lèi)組件的實(shí)例，所以babel嚴(yán)格模式下就指向了undefined。

構(gòu)造函數(shù)中this指向類(lèi)的實(shí)例。

箭頭函數(shù)中指向的是父級(jí)函數(shù)的上下文中的this。

call,apply,bind指向的是傳入的第一個(gè)參數(shù)。

四.解決React中函數(shù)指向的問(wèn)題

推薦使用 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}>點(diǎn)擊修改數(shù)據(jù)</button>
      </>
    )
  }
}

使用bind(this)的方式解決【了解即可】

使用箭頭函數(shù)方式解決【了解即可】

以上就是React組件里this指向了undefined原理解析的詳細(xì)內(nèi)容，更多關(guān)于React組件this指向undefined的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: