在React类中声明箭头函数时，是否应该使用const？

Question

在React类组件内部，是否应该使用const/let来声明箭头函数，还是应该省略它们？

  class ReactComp extend Component {
      const sayHello = () => {
          return 'Hello';
      }
      sayBye = () => {
          return 'Hello';
      }
      render() {
          <div>
            {this.sayHello}
            {this.sayBye}
          </div>
      }
  }

在这个例子中，sayBye正确声明了吗？（没有const）

另外，为什么在类外部，这样的声明不起作用？

  class ReactComp extend Component {

      render() {
          <div>
            {sayHello}
            {sayBye}
          </div>
      }
  }
  const sayHello = () => {
      return 'Hello';
  }
  sayBye = () => {
      return 'Hello';
  }

这将返回一个异常：未捕获的引用错误：sayBye未定义

非常感谢！

- user9226007

---

运行代码并查看哪个有效。不正确的将抛出SyntaxError。 - dfsq

Answer 1

答案是“要看情况”，你提供的两个例子做的事情非常不同。在我给你更详细的答案之前，让我们先来看一下这两个例子。

class ReactComp extend Component {
  const sayHello = () => {
      return 'Hello';
  }
  sayBye = () => {
      return 'Hello';
  }
  render() {
      <div>
        {this.sayHello}
        {this.sayBye}
      </div>
  }
}

以上代码可能会抛出语法错误，因为在这个上下文中const不是一个有效的装饰器。即使它是有效的（或者你简单地省略它），sayHello()将成为ReactComp类的方法（即实例方法）。每次创建此组件的新实例时，它都会有一个名为sayHello的内部方法。

const example = <ReactComp />;
example.sayHello(); // oversimplified example

有道理吗？接下来是您的另一个例子：

class ReactComp extend Component {
    render() {
        <div>
          {sayHello}
          {sayBye}
        </div>
    }
}
const sayHello = () => {
    return 'Hello';
}
sayBye = () => {
    return 'Hello';
}

暂时不考虑你之前提到的语法错误，这段代码创建了两个全局函数：sayHello() 和 sayBye()，根据你的其他代码，这些函数可以被任何其他组件或脚本全局访问。

sayHello(); // I can run this line of code anywhere!
// no need for "const example = <ReactComp /> because sayHello() was defined outside of that class

我的观点：在一个类上的实例方法与在组件外部声明的函数是不同的。

在React class中声明箭头函数时是否应该使用const？

如果您正在创建一个实例方法，则不需要使用const。如果您要在组件外创建一个通用（即实用）函数，则可能应该使用const。

- arthurakay

---

非常有帮助，我也有同样的疑问。 - Alok Ranjan

Answer 2

在类中，您无法使用任何声明语句来定义变量。

它期望属性名称附加到您的类的this上下文。

定义以下类：

class C extends Component {
 sayGoodBye = () => console.log("Bye!")
 sayHello = who => console.log("Hello " + who)

 render() {
   this.sayGoodBye()
   this.sayHello('world')
   // ...
 }
}

可以翻译为：

const C = {
  sayGoodBye : () => console.log('bye!'),
  sayHello : who => console.log('Hello ' + who),
  render : () => {
    C.sayGoodBye()
    C.sayHello('world')
  } 
}

如果你试图在一个类内部使用 const/let/var 定义变量，将会导致错误。

- bumbaneitr11