时间戳

首页 > 解决方案 > 在组件主体外部声明一个函数有什么区别吗？

javascript - 在组件主体外部声明一个函数有什么区别吗？

问题描述

考虑以下示例：

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

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

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

标签： javascriptreactjs

解决方案

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

在您的示例中，我会考虑 foo() 是否应该只在该文件或其他文件中使用。在后者的情况下，创建一个名为 utils/ 的单独文件夹，将函数放入其中并将其导入您需要的地方。

对于 props，您可以在类之外创建函数并使用 call() 调用它，然后就可以访问 props：

foo.call(this);

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

推荐阅读