关于React中使用bind(this)的理解

前言

在学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么要使用这个呢？在这里总结一下。

1.JavaScript自身特性说明

如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码：

首先我们创建test对象并直接调用方法 ：

const test = {
    name:'jack',
    getName:function(){
        console.log(this.name)
    }
}
test.getName()

使用node test.js执行上述代码可以正常输出jack。 之后，我们对代码进行调整：

const test = {
    name:'jack',
    getJack:function(){
        console.log(this.name)
    }
}
const func = test.getJack;
func();

我们没有直接调用对象的方法，而是将方法声明给一个中间变量，之后利用中间变量()调用方法，此时this则失去指向，输出undefined，如果使用node环境执行js文件则输出node相关信息，如嵌入到html中则this指向window对象。

2.React事件绑定

React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串，而是一个函数（如:onClick={this.handleClick}），此时onClick即是中间变量，所以处理函数中的this指向会丢失。解决这个问题就是给调用函数时bind(this)，从而使得无论事件处理函数如何传递，this指向都是当前实例化对象。

当然，如果不想使用bind(this)，我们可以在声明函数时使用箭头函数将函数内容返回给一个变量，并在调用时直接使用this.变量名即可。示例代码如下：

import React from 'react';
export default class Life extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:4
        };
    }
    render(){
        var style = {
            padding:'10px',
            color:'red',
            fontSize:'30px'
        }
        return (
            <div style={style}>{/*注意js语法使用一个括号{}去表示,style使用两个括号,原因里面其实是一个对象*/}
                <p>React生命周期介绍</p>
                <button onClick={this.handleAdd}>无bind点击一下</button>
                <button onClick={this.handleClick.bind(this)}>有bind点击一下</button>
                <p>{this.state.count}</p>
            </div>
        )
    }
    //此时this指向是当前实例对象
    handleAdd = ()=> {
        console.log(this)
        this.setState({
            count:5
        })
    }
    handleClick(){
        this.setState({
            count:6
        })
    }
}

总结

普通函数中，内层函数不能从外层函数中继承this的值，在内层函数中，this会是window或者undefined（取决于是否使用严格模式），可以设置一个临时变量用来将外部的this值导入到内部函数中，再一个方法就是在内部函数执行.bind(this)。
而箭头函数的this是继承父级的this。
因此在React中要注意，在一个方法中调用this.setState()等函数，或者在render()方法中被调用，都有内层函数参与，因此需要将该方法的this绑定到class。所以如果是用function的普通方法定义，需要在constructor中bind(this)，如：this.onChange = this.onChange.bind(this);
这样this指向组件实例，就可以在render()中使用，也可以在方法中调用this.setState()方法了。
或者直接用箭头函数进行定义。这样，this就继承自父级方法render(), 而render()的this为组件实例。
这样一来，在render()中就可以愉快的使用了：

render() {
return(
<input onChange={this.onChange}>
);
}

不建议在render()中bind，如：，因为它会在每次render()方法执行时绑定类方法，肯定对于性能有影响。而直接在constructor中bind, 则bind只会在组件实例化初时运行一次。