reactjs - 在 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';
  }

这将返回异常:Uncaught ReferenceError: sayBye is not Defined

非常感谢!

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';
}

暂时忽略您之前提到的语法错误，此代码创建两个全局(ish)函数: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 类中声明箭头函数时是否应该使用 const ？

如果您要创建实例方法，那么不您不需要const。如果您要在组件外部创建通用(即实用程序)函数，那么您可能应该使用 const。