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

更新時間：2023年03月05日 10:56:27 作者：舉個栗子兒

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

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

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

在原生js中我們綁定事件的時候是這樣子的，綁定的方法點擊的時候沒有加()這個時候控制臺是沒有反應的，也就是說，事件沒有被觸發(fā)。

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

當加上()后點擊就正常觸發(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語法中，從{}開始就相當于js表達式開始了，在js表達式中加了()相當于是調用函數(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()}>點擊修改數(shù)據(jù)</button>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <div>
        <Demos></Demos>
      </div>
    </div>
  )
}
export default App

但是問題接踵而至，我們去掉了小括號，但是此后this的指向變成了undefined，

三.自我反省

我懷疑可能是我js關于this指向的問題學的不太扎實

this指向：

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

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

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

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

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

構造函數(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原理解析的詳細內容，更多關于React組件this指向undefined的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: