什么是“静态"?在 React 中做什么? [英] What is "static" doing in React?

问题描述

我在 Codepen 上遇到了这个代码片段:

I came across this code snippet on 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 类中，他们在对象名称前使用了 static 一词.我试过在谷歌上搜索这些是什么以及它们在做什么，但我得到的只是 static 关键字定义了一个类的静态方法."

Within the StarshipEnterprise class, they are using the word static in front of the object names. I've tried googling what these are and what they are doing, but all I'm getting is "The static keyword defines a static method for a class."

作为初学者，我不知道这意味着什么.任何人都可以为我指出正确的方向，说明这些正在做什么或为什么我需要使用它们?

As a beginner, I have no idea what this means. Can anyone point me in the right direction on what these are doing or why I would need to use them?

推荐答案

静态是指只属于类而不属于它的实例的属性.

Static means a property that belongs to class only but not for it's instances.

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

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

Now we can use above static method through the class name:

       Triple.tripleFunc(3); //Valid

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

But not by creating it's instance:

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

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

Earlier in React we used to define propTypes and defaultProps outside the class by using following syntax :

    import React, {Component} from 'react';

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

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

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

Now we are defining it inside the class itself using static keyword here.

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

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

When we are importing SomeClass to another component then propTypes and defaultProps will be available in that component and can be accessed by using directly 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
         }
       }

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

But we should not use it like this as when we are generating build it may remove, and we will be getting warning for the same.

这篇关于什么是“静态"?在 React 中做什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！