Question

在react + ES6中考虑以下代码：

import React, { Component } from 'react';

const myFunction=(x,y)=>{
   return x*y
   };

 class MyTest extends Component {
 // state comes here 
   myProperty=(x,y)=>{
      return x*y
   };

   myMethod(x,y){
    return x*y
   }

    render () {
      return (<div>
          <h2>Result of myMethod: {this.myMethod(2,3)}</h2>
          <h2>Result of myProperty: {this.myProperty(2,3)}</h2>
          <h2>Result of myFunction: {myFunction(2,3)}</h2>
        </div>
      );
  }
 }
  export default MyTest;

输出内容如下：

myMethod的结果：6
myProperty的结果：6
myFunction的结果：6

真的有区别吗？一个比另一个好吗？

Answer 1

考虑到您显示的示例，两者之间没有太大区别，它们可能可以互换使用。

几乎没有什么事情，例如在外部（可能是在内部）声明函数表达式的事实，不会在每次实例化类时都重新创建它。老实说，我必须检查EcmaScript规范以进行验证。

当您需要传递这些功能之一作为对其他功能的引用，以及这些目的地是否需要访问原始上下文或新的上下文时，情况会发生变化。

Lambda除了声明的上下文之外不能具有其他上下文，因此可以毫无困难地将它们作为引用传递。

相反，

实例方法需要在绑定为引用之前绑定到上下文。

您见过这种模式吗？

constructor() {
  // ...
  this.myMethod = this.myMethod.bind(this)
}

myMethod(x,y){
  return x*y
}

这只是用与此上下文绑定的相同方法的副本覆盖了类范围内的myMethod。基本上与以下内容完全相同：

myMethod = (x, y) => x * y

Answer 2

在您的情况下，我建议您使用功能组件，即，您在类外部声明的函数是适合您的情况的函数。因为您正在传递输入并期望输出，所以该函数内部没有状态管理。因此，最好使用功能组件。

关于使用箭头功能还是普通功能，请查看下面的线程以获取详细答案

React: Which is recommended arrow or normal function?

Answer 3

可以查看{p> myFunction类的私有方法，因为MyTest不会导出。

myFunction和myMethod之间的区别在于myProperty使用ES6箭头函数语法。

在JavaScript中，对方法使用ES6语法尚未成为EcmaScript标准的一部分。您需要使用babel将其转换为ES5语法。使用ES6语法的好处是您不需要将myProperty绑定到myProperty，但是需要绑定this（否则myMethod是{{ 1}}）。

但是，我称它为this.myMethod是不正确的，因为它仍然是一种方法。属性将类似于undefined。基本上，它是对象的属性/属性，而不是操作。

汽车属性：myProperty或myProperty = {something: 5}
乘车方法：{color: "red"}

如何在反应的类方法和属性之间进行选择？

3 个答案: