this指向的规则
看两个点:
- this定义在哪个函数中
- 该函数被谁调用
JSX中的this指向
class Demo extends Component{
state = {
count: 0
}
handleClick = () => {
this.setState({count: this.state.count+1})
}
render(){
return(
<>
{this.state.count}
>
)
}
}
onClick={this.handleClick}
中的this:- 定义在哪个函数中
- 定义在render函数中
- 函数被谁调用:
- render函数被React调用,所以this指向React,又由于React做了一些设置,将this指向Demo类的实例,所以这里的this指向Demo类实例,所以this.handleClick就是 Demo实例.handleClick
class Demo extends Component{
state = {
count: 0
}
handleClick = function(){
this.setState({count: this.state.count+1})
}
render(){
return(
<>
{this.state.count}
>
)
}
}
// 点击按钮报错
// Cannot read properties of undefined (reading 'setState')
handleClick=function(){ this.setState...)
中的this:- 定义在哪个函数中:
- 定义在Demo类的handleClick函数中
- 函数被谁调用:
onClick={this.handleClick}
是将Demo.handleClick这个函数作为onclick事件的回调函数使用,回调函数执行时没有被调用者
箭头函数中的this指向
class Demo extends Component{
state = {
count: 0
}
handleClick = () => {
this.setState({count: this.state.count+1})
}
render(){
return(
<>
{this.state.count}
>
)
}
}
// 点击按钮正常
箭头函数中的this:
- 定义在哪个函数中:
- 定义在Demo类的handleClick函数中
- 函数被谁调用:
onClick={this.handleClick}
是将Demo.handleClick这个函数作为onclick事件的回调函数使用,回调函数执行时没有被调用者
{()=>this.handleClick()}的this指向:
class Demo extends Component{
state = {
count: 0
}
handleClick = function (){
this.setState({count: this.state.count+1})
}
render(){
return(
<>
{this.state.count}
>
)
}
}
// 点击按钮正常
【搞懂react类组件中的this指向】
{()=>this.handleClick()}
的this:- 定义在哪个函数中:
- 定义在() => 箭头函数中,
- 该函数被谁调用:
{() => this.handleClick()}
整体作为onclick事件触发时的回调函数被调用
{()=> this.handleClick()}
是定义在render函数中的,所以这个箭头函数内的this是指向Demo实例的,当onclick触发执行回调时,执行()=> this.handleClick()
,内部又执行this.handleClick()
,由于箭头函数内的this指向Demo实例,所以实际执行的就是Demo.handleClick()
,此时handleClick方法是被Demo实例调用,所以handleClick内的this指向Demo实例,所以正常.bind()方法的this指向
class Demo extends Component{
state = {
count: 0
}
handleClick = function (){
this.setState({count: this.state.count+1})
}
render(){
return(
<>
{this.state.count}
>
)
}
}
// 点击按钮正常
this.handleClick.bind(this)
的this:两个this都指向Demo实例,handleClick方法通过bind(this),其内部的this也被指向了Demo实例,所以能够正常执行
推荐阅读
- React技巧之导入组件
- React技巧之发出http请求
- React技巧之检查元素是否可见
- React技巧之处理tab页关闭事件
- javascript|客观评价 增长趋势比 vite 还猛的 TailwindCSS
- react|react3-Redux
- 工具实例|react+react-beautiful-dnd实例代办事项
- React|【React】3_使用react组件化编码流程及案例分享(附源码)
- react.js|react-vant 实现黑暗模式