React中的静态方法

ram*_*esh 11 javascript reactjs

我正在查看React文档并进入静态方法.我想知道在什么样的情况下它可能有用而且无法想到.

在React中构建组件时,是否存在静态方法有用的特定方案?

Jua*_*des 9

defaultProps并且propTypes是React组件的静态成员,它们不会针对每个实例进行更改.请参阅https://facebook.github.io/react/docs/reusable-components.html

静态属性的一个示例是能够跟踪创建对象的实例数(而不是特定于React).请注意,大多数情况下,如果要修改状态,静态方法就是代码味道.

var Contacts = React.createClass({
  statics: {
    instanceCount: 0
  },
  getInitialState: function() {
     Contacts.instanceCount++
     return {};
  },
  render: function() {
    return (<div > Hello {
      this.props.name
    } < /div>);
  }
});
console.log(Contacts.instanceCount) // 0
ReactDOM.render( < Hello name = "World" / > ,
  document.getElementById('container')
);
console.log(Contacts.instanceCount) // 1
Run Code Online (Sandbox Code Playgroud)

另一个例子是存储常量的方法.

var Contacts = React.createClass({
  statics: {
    MAX_VALUE:100
  },
  render: function() {
    return (<div > Hello {
      this.props.name
    } < /div>);
  }
});

if (someValue > Contacts.MAX_VALUE) {

}
Run Code Online (Sandbox Code Playgroud)

  • 它与Java中的相同,静态方法无法访问`this`,并且您不需要实例.将它保留在`Constructor`而不是`Constructor.prototype`的原因是你不希望实例能够覆盖该值. (3认同)
  • 使用常规方法并在组件内调用它并使用静态方法有什么区别? (2认同)