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'))