React组件里this指向了undefined原理解析
更新时间：2023年03月05日 10:56:27 作者：举个栗子儿
这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
我的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指向绑定该事件的DOM元素。如果通过代码来触发对应的事件的话，我们可以通过call/apply/bind来指定其
也就是说当我们通过一个按钮去触发事件的时候，事件中的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)的方式解决【了解即可】
使用箭头函数方式解决【了解即可】
以上就是React组件里this指向了undefined原理解析的详细内容，更多关于React组件this指向undefined的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了浅谈webpack+react多页面开发终极架构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了react native 原生模块桥接的简单说明小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
react的核心之一是组件，下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要为大家介绍了React跨端动态化之从JS引擎到RN落地，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
一文详解ReactNative状态管理redux-toolkit使用
这篇文章主要为大家介绍了ReactNative状态管理redux-toolkit使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了react使用echart绘制地图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了详解各版本React路由的跳转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用2022-09-09
这篇文章主要给大家介绍了关于利用React撸一个日程组件的相关资料,包括日常组件的实现思路、使用的技术、以及遇到的技术难点，并给提供了详细的实例代码,需要的朋友可以参考下2021-07-07
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论