1.普通函数 写成箭头函数
普通函数打印出来是undefined
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
state = {
username:'万科'
};
btnClick(){
console.log(this) // undefined
}
render() {
return <div>
<h1 onClick={this.btnClick}>普通函数</h1>
</div>
}
}
ReactDOM.render(<Header></Header>, document.getElementById('root'));
箭头函数 打印出Header中所有内容。
es6箭头函数没出现之前,this的指向不是函数被创建时绑定,而是被怎么样的方式调用时绑定的。而箭头函数刚好相反,箭头函数的this指向是函数被创建时绑定的,它的指向就是该函数所在的作用域指向的this,并且不会因为被怎么样的方式调用改变绑定,没有上下文对象,this就指向window。
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
state = {
username:'万科'
};
btnClick(){
console.log(this) // 指向class 定义的 Header
}
render() {
return <div>
<h1 onClick={()=>{
this.btnClick();
}}>箭头函数</h1>
</div>
}
}
ReactDOM.render(<Header></Header>, document.getElementById('root'));
- 第二种箭头函数 改变this指向 (推荐使用)
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
state = {
username:'万科'
};
btnClick = () =>{ //箭头函数
console.log(this) // 指向class 定义的 Header
}
render() {
return <div>
<h1 onClick={this.btnClick}>普通函数</h1>
</div>
}
}
ReactDOM.render(<Header></Header>, document.getElementById('root'));
- 使用bind 修改 this指向
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
state = {
username:'万科'
};
btnClick () {
console.log(this)
}
render() {
return <div>
<h1 onClick={this.btnClick.bind(this)}>bing 改变this指向</h1>
</div>
}
}
ReactDOM.render(<Header></Header>, document.getElementById('root'));