是否应在HOC中使用curring进行反应?

时间:2019-07-25 17:59:58

标签: javascript reactjs

进行欺骗是表现欠佳或不好的做法吗?是更好的性能还是更好的做法?还是仅仅是偏爱。我真的找不到关于该主题的任何具体证据。

class MyClass extends React.component {
 ...
}
export default HOC(someParam)(MyClass)

对比:

class MyClass extends React.component {
 ...
}
export default HOC(someParam, MyClass)

HOC示例(可循):

export default function HOC(someParam){
 // do something with someParam here
 return function(ChildComponent){
   return (props) => ( <ChildComponent {...props}/> )
 }
}

HOC示例(不进行统计):

export default function HOC(someParam, childComponent){
 // do something with someParam here
 return (props) => ( <ChildComponent {...props}/> )
}

1 个答案:

答案 0 :(得分:1)

在性能方面,任何差异都可以忽略不计,以至于无关紧要。创建函数需要纳秒的时间,无论如何,您只需要为每个类做一次。

因此,决定应该取决于您是否从中受益。如果使用大量高阶分量,则使用组合将多个HOC组合在一起可能会很有用。如果是这样的话,由于组合通常要求函数是一元的,因此计算将非常有用。例如:

class MyClass extends React.Component {
  // whatever
}


export default compose(
  withI18n,
  withTheme,
  connect(state => ({ foo: state.foo }),
  HOC("someValue") // <-- this would be from your curried example
)(MyClass)

// Without composition, this would be the following... i think.
withI18n(withTheme(connect(state => ({ foo: state.foo }))(HOC("someValue", MyClass))));