ReactJS - 我应该使用类方法还是外部函数

Question

假设我有一个ReactJS组件并想要在其中调用一些自定义函数,将此函数作为类方法,或者更确切地说是单独定义是否更好？(假设该函数只应在此组件中使用)

class OnwComponent extends React.Component {
  constructor() {
    super();
    this.doubledNumber = this.doubledNumber.bind(this);
  }
  doubledNumber(num) {
    return num * 2;
  }
  render() {
    return (
      <p>{doubledNumber(10)} or {this.doubledNumber(10)}? Pros and cons?
    );
  }
}

function doubledNumber(num) {
  return num * 2;
}

Answer 1

这通常只是一种风格偏好.

话虽如此,ESlint正是这个规则:class-methods-use-this:

如果类方法不使用它,它可以安全地成为静态函数.

此外,最受欢迎的React样式指南之一(airbnb)默认启用此规则.因此,就最佳实践而言,我会说:将doubledNumber功能移出课堂.

在有关在eslint中实现此规则的讨论中,他们也讨论了性能注意事项:

此规则具有风格,但具有性能影响.如果某个函数没有使用它,则只要创建了该类的新实例,就会不必要地复制它.