React类组件中事件绑定this指向的三种方式

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件。
状态又叫做数据
函数组件没有自己的状态，只负责静态页面的展示。
我们可以理解为纯ui展示。()
类组件有自己的状态，扶着更新UI,会让页面动起来.

state的基本使用

state就是数据，是组件内部的私有数据。
只能够在组件内部使用。

state的值是一个对象，表示一个组件中可以有多个数据。

设置值state使用this.setState

语法：this.setState({ count:新值 })
只会更改state中count的值。
并不会将state中其他值进行初始化。
千万不要直接更改state中的值。这是错误的。
必须通过 this.setState
this.state.count=10 直接更改错误的
那么state的两个作用：1修改state中的值. 2更新ui

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class ShowCont extends React.Component {
// 简化语法初始化state(推荐)
// state = {
//     count:0
// }

// 另外一种
constructor() {
super()
this.state = {
count:0
}
}

// 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={() => {
//如果这里的代码很多怎么抽离出来呢？？
this.setState({
count:this.state.count+1
})
}}>+</button>
</div>
)
}
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

如何将事件中的代码抽取出来 (第一种:箭头函数中的this)

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class ShowCont extends React.Component {
state = {
count:100
}

onIncrement() {
this.setState({
count:this.state.count+10
})
}
// 点击事件
<!-- 第一种:箭头函数中的this,利用箭头函数中自身不绑定this的特点 -->
render() {
return (
<div>
<span>计数值 {this.state.count}</span>
{/* 箭头函数中的this指向外部环境，此处为render()里面的方法。
而render中的方法就是组件中的实例 */}
<button onClick={()=>this.onIncrement()}>+</button>
</div>
)
}
}

ReactDOM.render(<ShowCont/>, document.getElementById('root'))

Function.protype.bind()改变this的指向 (第二种)

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class ShowCont extends React.Component {
state = {
count:100
}

<!-- 点击按钮的时候肯定是先执行的constructor -->
constructor() {
super()
this.state = {
count:0
}
this.onIncrement=this.onIncrement.bind(this)
}

// 事件处理程序
onIncrement() {
this.setState({
count:this.state.count+10
})
}

// 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={this.onIncrement}>+</button>
</div>
)
}
}

ReactDOM.render(<ShowCont/>, document.getElementById('root'))

第三种 (推荐使用)

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom

class ShowCont extends React.Component {

state = {
count:0,
}

// 事件处理程序
onIncrement=() =>{
this.setState({
count:this.state.count+10
})
}
// 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={this.onIncrement}>+</button>
</div>
)
}
}

ReactDOM.render(<ShowCont/>, document.getElementById('root'))