欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年03月05日 10:56:27   作者:舉個栗子兒  
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

我的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指令的例子

    在React框架中實現(xiàn)一些AngularJS中ng指令的例子

    這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下
    2016-03-03
  • react創(chuàng)建項目啟動報錯的完美解決方法

    react創(chuàng)建項目啟動報錯的完美解決方法

    這篇文章主要介紹了react創(chuàng)建項目啟動報錯的完美解決方法,全稱為Node Package Manager,是隨同NodeJS一起安裝的包管理工具,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • React啟動時webpack版本沖突報錯的解決辦法

    React啟動時webpack版本沖突報錯的解決辦法

    在啟動React應(yīng)用時,遇到Webpack版本不匹配導(dǎo)致的運(yùn)行錯誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據(jù)項目需求安裝特定版本的webpack,本文通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • 詳解React 父組件和子組件的數(shù)據(jù)傳輸

    詳解React 父組件和子組件的數(shù)據(jù)傳輸

    這篇文章主要介紹了React 父組件和子組件的數(shù)據(jù)傳輸?shù)南嚓P(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    React Native之prop-types進(jìn)行屬性確認(rèn)詳解

    本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • react-router-dom簡介(推薦)

    react-router-dom簡介(推薦)

    react-router包含三種類型的組件:路由組件、路由匹配組件?、導(dǎo)航組件,在你使用這些組件的時候,都必須先從react-router-dom引入,這篇文章主要介紹了react-router-dom簡介,需要的朋友可以參考下
    2022-12-12
  • styled-components?性能詳解

    styled-components?性能詳解

    這篇文章主要為大家介紹了styled-components?的性能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • react.js 翻頁插件實例代碼

    react.js 翻頁插件實例代碼

    這篇文章主要介紹了react.js 翻頁插件實例代碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-01-01
  • 淺談React高階組件

    淺談React高階組件

    這篇文章主要介紹了淺談React高階組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • React利用lazy+Suspense實現(xiàn)路由懶加載

    React利用lazy+Suspense實現(xiàn)路由懶加載

    這篇文章主要為大家詳細(xì)介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下
    2023-06-06

最新評論