亲宝软件园·资讯

展开

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

举个栗子儿 人气:0

我的React组件里为什么this指向了undefined?

一.首先先唠一唠react事件中方法加不加()的问题

在原生js中我们绑定事件的时候是这样子的,绑定的方法点击的时候没有加()这个时候控制台是没有反应的,也就是说,事件没有被触发。

<button onclick="demo">点击触发</button>
<script>
  function demo () {
    console.log("点击了这个事件")
  }
</script>

当加上()后点击就正常触发执行了,这是js触发事件的规则。

 <button onclick="demo()">点击触发</button>
<script>
  function demo () {
    console.log("点击了这个事件")
  }
</script>

二.问题发生了

在我们写React的类组件的时候发现了一个问题,问题就是,正常触发事件的时候这个小括号就不用写了,但是如果写了,就算没有点击,也会触发这个事件,因为在react的jsx语法中,从{}开始就相当于js表达式开始了,在js表达式中加了()相当于是调用函数了,不加是当我们点击的时候,让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()}>点击修改数据</button>
      </>
    )
  }
}
function App () {
  return (
    <div className="App">
      <div>
        <Demos></Demos>
      </div>
    </div>
  )
}
export default App

但是问题接踵而至,我们去掉了小括号,但是此后this的指向变成了undefined,

三.自我反省

我怀疑可能是我js关于this指向的问题学的不太扎实

this指向:

普通函数或者作为对象属性,指向window对象

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

<body>
  <button onclick="demo()">点击触发</button>
</body>
<script>
  function demo () {
    console.log("点击了这个事件", this)
  }
</script>

也就是说当我们通过一个按钮去触发事件的时候,事件中的this指向的是window,所以我们对比着去理解也就明白了为什么React中指向的是undefined,因为React中指向的window,但是我们想让它指向的是当前的类组件的实例,所以babel严格模式下就指向了undefined。

构造函数中this指向类的实例。

箭头函数中指向的是父级函数的上下文中的this。

call,apply,bind指向的是传入的第一个参数。

四.解决React中函数指向的问题

推荐使用 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}>点击修改数据</button>
      </>
    )
  }
}

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

使用箭头函数方式解决【了解即可】

加载全部内容

相关教程
猜你喜欢
用户评论