Как выбрать между методами класса и свойствами в реагировать?

Question

Рассмотрим следующий код в реакции + 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

В вашем случае я бы порекомендовал вам перейти с функциональным компонентом, т. Е. Функция, которую вы объявили вне класса, подходит для вашего случая.Потому что вы передаете ввод и ожидаете вывод, и внутри этой функции нет управления состоянием.Так что хорошо бы пойти с функциональным компонентом.

Что касается использования функции стрелки или нормальной функции, проверьте подробный ответ в нижеследующей теме

Реакция: Какая рекомендуемая стрелка или нормальная функция?

Answer 2

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()

Answer 3

Учитывая пример, который вы показали, большой разницы нет, и их, вероятно, можно использовать взаимозаменяемо.

Есть только очень маленькие вещи, такие как факт, что выражение функции объявлено снаружи, возможно, внутренне, он не будет повторно создаваться каждый раз, когда создается экземпляр класса.Честно говоря, я должен проверить спецификацию EcmaScript, чтобы проверить это.

Вещи меняются, когда вам нужно передать одну из этих функций в качестве ссылки на другие функции, и нужно ли этим адресатам обращаться к исходному контексту или к новому.

У лямбд не может быть другого контекста, кроме того, в котором они объявлены, поэтому они могут передаваться как ссылки без проблем.

Вместо этого методы экземпляра должны быть связаны с контекстомпрежде чем они будут переданы как ссылки.

Вы когда-нибудь видели этот шаблон?

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

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

Это просто перезаписывает myMethod в области видимости с копией того же метода, связанного с этим контекстом,В основном точно так же, как:

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