React学习

写在开头：下面部分内容是转自其他大佬的解释，本文只是转摘+整理，供自己学习记录。

1、关于react学习中的this

首先解释js中的this调用时可能出现bug的情况——原理：JS中的this是由函数调用的地方所决定的。例1：

例子1

上面的例子中，第一个this指的是cat（即当前函数所在的对象）；而输出结果则是undefined（ES6的语法下默认自动使用严格模式，即‘use strict;’；如果非严格模式输出结果为window）

js在对象外时，函数被赋给tom时，当前对象不为cat，this则指向了undefine。

解决this指向的问题的方法：

如果没有this，则不需要用下面两种方法。react中不用bind(this)是为了提高效率。

1、箭头函数

class A entend Component {

    onChange = (value) => {

        console.log(this); ........

    }

    render(

        <Button onChange = "this.onChange" />

    )

}

2、bind（this）

class A extend Component{

    onChange(value) {console.log()........}  // onChange函数

    render中 调用时this.onChange.bind(this, value);

}

3、在constructor内提前将绑定了bind的函数赋给新变量   => 其实和方法一类似

contructor (prop) {

    .......（其他内容）   this.onChange= this.onChange.bind(this);

}

onChange = (value) => {

        console.log(this); ........

    }

render(

    <Button onChange = "this.onChange" />

)