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

时间:2017-01-19 19:20:35

标签: reactjs

假设我有一个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;
}

2 个答案:

答案 0 :(得分:5)

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

话虽如此,ESlint完全遵循这条规则:class-methods-use-this

  

如果类方法不使用它,则可以安全地将其设置为静态   功能

此外,最流行的React样式指南之一(airbnb)默认启用此规则。因此,就最佳实践而言,我会说:将doubledNumber函数移出课堂。

在eslint的discussion related to implementing this rule中,他们也讨论了性能方面的考虑因素:

  

此规则具有风格,但具有性能影响。如果一个   函数没有使用它,每当新的时候都会被不必要地复制   创建了类的实例。

答案 1 :(得分:1)

取决于

如果该函数与组件逻辑本身相关并且仅在那里使用,我将其作为组件方法保留。

否则:

  • 如果函数代表了通用编程常见问题的解决方案,我会将其移到辅助组件中,在React组件中导入辅助组件并使用它。

  • 如果该功能与特定的业务逻辑相关,我会将其移到服务组件中,该组件包含功能业务逻辑,在您的React组件中导入服务组件并使用它。

因此,这是一个基于意见的主要问题。根据您的项目设置和方法逻辑,您需要做出最终决定。