react中如何在类方法和属性之间进行选择？答案

【问题标题】：How to choose between class methods and properties in react?react中如何在类方法和属性之间进行选择？
【发布时间】：2019-07-01 20:23:26
【问题描述】：

在 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

真的有区别吗？一个比另一个更可取吗？

【问题讨论】：

标签： reactjs methods properties

【解决方案1】：

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

只有很少的事情，例如在外部（可能在内部）声明函数表达式，不会在每次实例化类时重新创建它。老实说，我必须检查 EcmaScript 规范来验证它。

当您需要将其中一个函数作为对其他函数的引用以及这些目标是需要访问原始上下文还是新上下文时，情况会发生变化。

Lambda 不能有其他上下文，而不是声明它们的上下文，因此它们可以作为引用传递而不会遇到麻烦。

相反，实例方法需要绑定到上下文，然后才能作为引用传递。

你见过这种模式吗？

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

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

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

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

【讨论】：

我可以这样想吗： * 如果你不需要 this 来访问对象内部，使用外部函数（示例中的 myFunction） * 如果你确实需要 this ，使用箭头函数，示例中的 myProperty * 如果您遇到现有方法 - 例如 react 中的 render ，请记住，如果您需要绑定它们想从对象外部访问它们
我无法更好地解释它:)

【解决方案2】：

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

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

React: Which is recommended arrow or normal function?

【讨论】：

【解决方案3】：

myFunction 可以被视为MyTest 类的私有方法，因为myFunction没有被导出。

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

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

但是，我认为将其称为myProperty 是不对的，因为它仍然是一种方法。属性类似于myProperty = {something: 5}。基本上，它是对象的属性/属性，而不是动作。

汽车属性：{color: "red"} 或 myColor = "red"
取车方法：drive()

【讨论】：