溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

React組件里this指向了undefined的原理是什么

發(fā)布時(shí)間：2023-03-07 14:37:18 來源：億速云 閱讀：154 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“React組件里this指向了undefined的原理是什么”，在日常操作中，相信很多人在React組件里this指向了undefined的原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”React組件里this指向了undefined的原理是什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

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

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

在原生js中我們綁定事件的時(shí)候是這樣子的，綁定的方法點(diǎn)擊的時(shí)候沒有加()這個(gè)時(shí)候控制臺(tái)是沒有反應(yīng)的，也就是說，事件沒有被觸發(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>

React組件里this指向了undefined的原理是什么

二.問題發(fā)生了

在我們寫React的類組件的時(shí)候發(fā)現(xiàn)了一個(gè)問題，問題就是，正常觸發(fā)事件的時(shí)候這個(gè)小括號(hào)就不用寫了，但是如果寫了，就算沒有點(diǎn)擊，也會(huì)觸發(fā)這個(gè)事件，因?yàn)樵趓eact的jsx語法中，從{}開始就相當(dāng)于js表達(dá)式開始了，在js表達(dá)式中加了()相當(dāng)于是調(diào)用函數(shù)了，不加是當(dāng)我們點(diǎn)擊的時(shí)候，讓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()}>點(diǎn)擊修改數(shù)據(jù)</button>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <div>
        <Demos></Demos>
      </div>
    </div>
  )
}
export default App

React組件里this指向了undefined的原理是什么

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

React組件里this指向了undefined的原理是什么

三.自我反省

我懷疑可能是我js關(guān)于this指向的問題學(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>

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

React組件里this指向了undefined的原理是什么

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

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

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

call,apply,bind指向的是傳入的第一個(gè)參數(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}>點(diǎn)擊修改數(shù)據(jù)</button>
      </>
    )
  }
}

到此，關(guān)于“React組件里this指向了undefined的原理是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手