假设我有一个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;
}
答案 0 :(得分:5)
这通常只是一种风格偏好。
话虽如此,ESlint完全遵循这条规则:class-methods-use-this:
如果类方法不使用它,则可以安全地将其设置为静态 功能
此外,最流行的React样式指南之一(airbnb)默认启用此规则。因此,就最佳实践而言,我会说:将doubledNumber
函数移出课堂。
在eslint的discussion related to implementing this rule中,他们也讨论了性能方面的考虑因素:
此规则具有风格,但具有性能影响。如果一个 函数没有使用它,每当新的时候都会被不必要地复制 创建了类的实例。
答案 1 :(得分:1)
取决于。
如果该函数与组件逻辑本身相关并且仅在那里使用,我将其作为组件方法保留。
否则:
如果函数代表了通用编程常见问题的解决方案,我会将其移到辅助组件中,在React组件中导入辅助组件并使用它。
如果该功能与特定的业务逻辑相关,我会将其移到服务组件中,该组件包含功能业务逻辑,在您的React组件中导入服务组件并使用它。
因此,这是一个基于意见的主要问题。根据您的项目设置和方法逻辑,您需要做出最终决定。