javascript - "static"在 React 中做什么？

Question

我遇到了 this code snippet在 Codepen 上:

const { Component, createElement, PropTypes } = React;

const source = `<p>Hello, my name is {{name}}. I work for {{employer}}. I have {{kids.length}} kids:</p> <ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>`;

const template  =  Handlebars.compile( source );

class StarshipEnterprise extends Component {

    static propTypes = {
        name: PropTypes.string,
        employer: PropTypes.string,
        kids: PropTypes.arrayOf( PropTypes.object ),
    };

    static defaultProps = {
        name: "Data",
        employer: "United Federation of Planets",
        kids: [
            { 
                name: "Lal",
                age: "2"
            },
        ]
    };

    render () {
        return <div className="container" dangerouslySetInnerHTML={{ __html: template( this.props ) }} />;
    }

}

ReactDOM.render( createElement( StarshipEnterprise ), document.getElementById( "app" ) );

在 StarshipEnterprise 类中，他们在对象名称前使用静态一词。我尝试用谷歌搜索这些是什么以及它们在做什么，但我得到的只是“The static keyword defines a static method for a class.”

作为初学者，我不知道这意味着什么。任何人都可以为我指出正确的方向，告诉我它们在做什么或为什么我需要使用它们吗？

Answer 1

静态是指只属于类但不属于它的实例的属性。

    class Triple {
       let triplevar = 0;
       static tripleFunc(n) {
          if(n == 1) { return 1;}
          else { return n*3; }
       }
    }

现在我们可以通过类名来使用上面的静态方法了:

       Triple.tripleFunc(3); //Valid

但不是通过创建它的实例:

       let tp = new Triple();
       tp.tripleFunc(6); //Not-Valid

早期在 React 中，我们使用以下语法在类外定义 propTypes 和 defaultProps :

    import React, {Component} from 'react';

    class SomeClass extends Component {
      constructor(props){
        super(props)
      }
    }

    SomeClass.proptypes = {};
    SomeClass.defaultProps = {};

现在我们在这里使用 static 关键字在类本身内部定义它。

    class SomeClass extends Component {
      constructor(props){
        super(props)
      }
      static propTypes = {};
      static defaultProps = {};
    }

当我们将 SomeClass 导入另一个组件时，propTypes 和 defaultProps 将在该组件中可用，并且可以通过直接使用 as 访问:

    class ChildClass extends SomeClass {
         constructor(props) {
            super(props);
            this.instanceSomeClass = new SomeClass();
            console.log(this.instanceSomeClass.propTypes);  // Will get undefined here
            console.log(SomeClass.propTypes) // it will be fine
         }
       }

但我们不应该像这样使用它，因为当我们生成构建时它可能会被删除，并且我们会收到相同的警告。