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

【问题标题】：Using method on class or function in closure在闭包中使用类或函数的方法
【发布时间】：2018-03-24 18:24:15
【问题描述】：

假设我想用一些方法（没有状态或生命周期方法）创建一个简单的 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;

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

一般来说，如果组件不保持状态或不使用生命周期方法，那么实现该组件的最佳方式是什么？

【问题讨论】：

在你的第一个例子中应该是this.doSomething()，不是吗？
是什么让你认为闭包会有任何开销或内存泄漏？
除了生命周期方法和state 一个class 组件可以从父组件调用处理程序并向上传递参数

标签： javascript reactjs closures

【解决方案1】：

一般情况下，如果您：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：