Question

假设我想用一些方法创建一个Simple React组件（没有状态或生命周期方法）。我可以通过以下两种方式之一来实现：

// Foo.js
class Foo extends React.Component {
  doSomething() {
    // do something
  }

  render() {
    ...
    this.doSomething();
    ...
  }
}
export default Foo;

或者我可以这样做：

// Foo.js
const doSomething = () => {
  // do something...
}

const Foo = () => {
  ...
  doSomething();
  ...
}
export default Foo;

第二个是优选的，因为它是一个功能组件（更简单，开销更少），但是闭包功能是否带来内存泄漏的任何开销/风险？

通常，如果组件不保持状态或使用生命周期方法，这是实现组件的首选方法吗？

Answer 1

一般来说，如果你：

不想维护state
不需要使用生命周期方法（如componentDidMount）

最好使用无状态功能组件，这些组件快速且可读性更高。不，您不必担心因关闭而导致的内存泄漏。有关无状态组件的更多好处，请参阅https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

Answer 2

如果您没有跟踪应用程序状态或生命周期方法，则不需要使用基于类的组件，因为它需要大量开销，并且您不需要跟踪{{1坦率地说，关键字很烦人。

功能组件是愚蠢的。根本不知道应用程序状态。它可用于显示/显示组件，而不必担心在发出事件时自行更新。

在您的情况下，如果this方法不涉及任何动态行为，则最好采用第二种方法。

在闭包中使用类或函数的方法

2 个答案: