javascript - 在我们的组件主体外部声明函数之间有什么区别吗？

Question

考虑以下示例:

const foo = string => "bar" + string;

class Example extends React.Component {
  foo = string => "bar" + string
  
  render = () => <p>
    {foo("asd"); this.foo("asd")}
  </p>
}

我唯一想到的是，组件体内的函数可以访问它的属性，例如 props、状态和体内的任何东西，包括函数，但我们也可以将它们作为外部函数的参数传递。那么这是唯一的“优点或缺点”，还是有更高级的东西？

Answer 1

在 React Native 的情况下，在类之外声明一个函数就像创建一个静态函数。如果将函数放在类中，将为类的每个实例创建它，在这种情况下是不必要的。

在您的示例中，我会考虑 foo() 是否应该只在该文件中使用，还是也应该在其他文件中使用。对于后者，创建一个名为 utils/的单独文件夹，将函数放在那里，然后将其导入到您需要的地方。

当涉及到 props 时，您可以在类外部创建函数并使用 call() 调用它，然后就可以访问 props:

foo.call(this);

const foo = () => console.log(this.props);