记录react中this指向问题

1.箭头函数改变this指向

import React from "react";
class State extends React.Component{
    state = {
        count: 0
    }
    add() {
        console.log('this',this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <div>
                    cout: { this.state.count }
                </div>
                // 通过箭头函数的形式调用
                <button onClick={() => this.add()}>+1</button>
            </div>
        )
    }
}
export default State

2.使用bind改变this指向

import React from "react";
class State extends React.Component{
    constructor() {
        super()
        this.state = {
            count: 0
        }
        // bind改变this指向
        this.addFun = this.addFun.bind(this)
    }
    addFun() {
        console.log('this',this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <div>
                    cout: { this.state.count }
                </div>
                <button onClick={ this.addFun }>+1</button>
            </div>
        )
    }
}
export default State

3.使用class实例

import React from "react";
class State extends React.Component{
    state = {
        count: 0
    }
    addFun = () => {
        console.log('this',this)
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <div>
                    cout: { this.state.count }
                </div>
                <button onClick={ this.addFun }>+1</button>
            </div>
        )
    }
}
export default State