React组件方法的两种定义方式-白红宇

在React组件中，通常可通过两种方式来定义组件的方法：普通函数、箭头函数；作为方法存在，那么两者到底有什么区别呢？

方法挂载点

es6,有一部分是对过去版本的js进行包装。在使用es6语法的React组件中，要剖析普通函数和箭头函数定义方法有什么区别，可通过babel转换，转换成我们熟悉的js语法，看看二者的本来面目。

举个例子：

class Hello {        greet(){ },        say = () => { },    }复制代码

，突出重点，大致如下：

function Hello(){    this.say = () => { }}function.prototype.greet = function() { }复制代码

通过转义后的代码，可看到区别：

普通函数被定义为类的原型方法

通过function创建的原型方法。

箭头函数被定义为类的实例方法

通过箭头方法创建的实例方法。

原型方法和实例方法？

属性查找在查找实例的属性和方法时，首先会在实例的属性、方法中查找，当没有找到时，在循着实例的原型链进行查找，直到查找到对应的属性和和方法，或者最后什么都查不到。这就和性能相关了，查找属性、方法的时间有过不同。

调用实例方法只能通过实例调用，而原型方法还能通过函数调用，比如：A.prototype.click()。

this指向

在es6之前的js语法中，this的指向是一个比较多场景的问题在Js中，在此忽略。我们今天只讲在React组件中这两种方法的this指向。从上面得出，两个方法的在类中的的挂载点是不同的，然而，这并不是导致他们作为方法，表现差异有所不同的原因，更多的是他们的的创建方式导致this有所区别。

箭头函数定义的方法

箭头函数定义方法时，this指向的是函数定义时的作用域。看例子：

function A(){    this.num = 2;    this.handleClick = () => { console.log(this.num) };}const B = new A();// 第一种情况B.handleClick(); //2// 第二种情况const fn = b.handleClick;fn(); // 2复制代码

普通函数定义的方法

而普通函数的this,却是根据调用它时的对象有所关系。

function A(){   this.num = 2   this.handleClick = function(){console.log(this.num) }}const B = new A();//以下都为严格模式下B.handleHover(); // 2const fn = B.handleHover;fn(); // 报错，因为在严格模式下this为undefined复制代码

无论是原型方法或者是实例方法，导致在调用时，this不同，原因在于他们的创建方式，当使用箭头函数创建，那么this将指向函数定义时的作用域；而当使用普通的function创建时，this的指向和函数的调用环境有关，（关于普通函数this的指向有所不了解，可通过《你不知道的javascript》熟悉）

所以，无论如何，箭头函数的this都不会发生改变,this指向的是组件；而普通函数的this随着调用场景的变化有所变化。

方法使用

如果我们在需要将组件的一个方法绑定给一个子元素，为了保证函数中的this指向的是这个React组件（当函数需要借助组件的一些状态和属性时）。

class Hello extends React.PureComponent {    greet() {console.log(this)}    say = () => { console.log(this)}        render() {        return (            
    
                     // 普通函数                
     
      普通函数
     
                
     
       this.greet(e)}>
     
                // 箭头函数                
     
            
    
        )    }}复制代码

普通函数的传递方法视觉上就觉得有点繁琐，除此之外，更重要的是性能方面。

React的生命周期中，shouldUpdateComponent，当shouldUpdateComponent返回false时，组件将不会重新render，子组件也可避免重新render。在 React 15.3.0 ，Reac可通过React.Purecomponent定义组件，当shouldUpdateComponent进行shallow compare时，避免一些不必要的render。而通过普通函数定义的方法，通过bind绑定后，每次父组件发生render时，方法就得重新bind(this)，对于子组件而言，它的props、state发生了改变，则必须发生重新渲染。

如果我们定义的方法不用绑定给子元素，而是被组件自己内部的函数调用，箭头函数和普通函数都可以用来定义方法。

class DownloadGameBtn extends React.PureComponent {    constructor(props) {        super(props);        this.initInfo();        this.initSize();    }    initInfo() {       console.log(this); // 指向DownloadGameBtn组件     }    initSize = () => {        console.log(this) // 指向DownloadGameBtn组件    }}复制代码

参考

最后

在工作中遇到的问题，通过各种资料查找，进行总结和归纳，感谢各位前辈的分享。这是第一次在一个公共社区发表自己的总结文章，写的有点蠢蠢的，希望这些可以帮到和我一样遇到类似困惑的朋友。然后，大家轻点喷。