静态方法的用例

时间:2018-11-27 08:21:26

标签: javascript reactjs es6-class

在ES6类中使用静态方法的所有实用且频繁使用的案例将是什么?

让我添加一个。 React具有复合成分的概念。

class Toggle extends React.Component {

  static On = ({on, children}) => (on ? children : null)
  static Off = ({on, children}) => (on ? null : children)
  static Button = ({on, toggle, ...props}) => (
    <Switch on={on} onClick={toggle} {...props} />
  )
  state = {on: false}
  toggle = () =>
    this.setState(
      ({on}) => ({on: !on}),
      () => this.props.onToggle(this.state.on),
    )
  render() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        on: this.state.on,
        toggle: this.toggle,
      }),
    )
  }
}

用法

return (
    <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Off>The button is off</Toggle.Off>
      <Toggle.Button />
    </Toggle>
  )

我确实打算参考所有不熟悉OOP设计的开发人员。因此,出于这个原因,可能没有一个最佳答案,但是在发布其他成员的良好答案的过程中,您可能会感到不满。

注意-每个人可能都知道通用实用程序功能/验证/等。我相信这里可能会有更强大的人,或者说是未知的人,可以从高级社区成员那里听到。

2 个答案:

答案 0 :(得分:1)

  

在ES6类中使用静态方法的所有实用且频繁使用的案例将是什么?

与实例无关的实用程序功能。

以这个例子为例:

class Car {
   constructor() {
     this.steeringWheel = new SteeringWheel()
   }

   // Obviously can't be a static method, it deals
   // with THIS car's steering wheel.
   turn(direction) {
     this.steeringWheel.turn(direction)
   }

   // Can be static.
   static milesToKm(miles) {
     return miles / 0.6
   }
}
  • 我可能想使用milesToKm而不实例化任何东西,即Car.milesToKm(100)可以正常工作。我不需要创建Car来调用它。

  • 方法本身从不接触实例。

答案 1 :(得分:-1)

  

在ES6类中使用静态方法的所有实用且频繁使用的案例将是什么?

共享的单例实例,例如队列或Websocket连接。