在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是否正确声明？（如果没有一个常数）

另外，为什么在课堂之外，这样的声明不起作用？

  class ReactComp extend Component {

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

这将返回异常：Uncaught ReferenceError：未定义sayBye

非常感谢！

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

暂时忽略您前面提到的语法错误，此代码创建了两个global（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

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

const在React类中声明箭头功能时应该使用一个吗？

如果您正在创建一个实例方法，那么没有你不需要const。如果要在组件外部创建通用（即实用程序）函数，则可以使用const。