react简单入门-组件点击事件的函数无法访问this

*场景：首先你能来看本篇文章，那说明你的代码有可能类似是这样：

当点击按钮，调用test函数，结果打印this的时候，或者说想在test函数里面访问this的一些属性的时候，控制台却是undefined

如果说你只是单纯地想解决问题的话，有如下解决方案，直接挑选如下你想要的方案代码即可run了，但是你要想多了解一下的话，还请继续往下看。

方案一：

方案二：

方案三：

方案四：

解决思路：

• 导致问题的原因：首先在class类里面的函数，它是无法自己绑定这个函数的this的，所以说你就只能自己手动的去绑定这个函数的this。
• 上诉方案解决问题的原因：

+方案一：直接在constructor构造函数里面就已经把当前Squary组件对象添加一个属性test，其值就是this.test.bind(this),其中bind函数的作用就是给函数绑定死它对应的this，所以test函数就可以固定死它的this是指向当前Squary组件的

+方案二：跟方案一原理一样，只不过是在按钮点击的时候才去绑定。

+方案三：利用的是箭头函数无this的特性，所以箭头函数里面的方法只能继承箭头函数的最近父级的this，而又由于其父级就是这个render函数，再加上render函数的this就是当前Squary组件，所以test函数的this也就跟着指向当前Squary组件

+方案四：这个方案的其实是使用的是实验性的 public class fields 语法

*各自有缺点：

• 方案一：
  优点：官方推荐，且也符合js的规范，性能也较好
  缺点：每多一个函数，就要多写一句bind绑定，每多一个组件，我就要写constructor构造函数，代码量增加了

• 方案二：
  优点：代码量较对于方案一少一些
  缺点：我以后每点击一次，就会bind一次而bind本身返回就会返回一个函数，那岂不是每点一次就产生一个函数实例？？有点费性能。

• 方案三：
  优缺点和方案二一样

• 方案四：
  优点：代码整洁，也不用额外的写constructor构造函数，在实际开发中比较适合
  缺点：这个是实验性语法（语法糖），所以可能需要用额外下载一些babel依赖进行转换一下，如：npm install --save-dev @babel/plugin-proposal-class-properties，不过新建的react项目都是有自带的，如下：