es6中静态变量

Question

看书的时候看到，react为props提供了默认配置，通过defaultProps静态变量的方式来定义，请解释一下什么叫静态方法，有什么特性，然后同时问一下defaultProps在react中的使用

Answer 1

最近刚看react，什么是静态方法不太懂，就我目前所理解的说一下，如有不对望不吝赐教

首先说一下react的单向数据流。<Hello name="Jhon" />调用了Hello这个组件，跟普通的函数调用差不多，name="Jhon"是它的实参，在定义Hello组件这里

class Hello extends React.Component {
    render () {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
                <Hi ...this.props />
            </div>
            )
    }
}

ReactDOM.render (
    <div>
        <Hello name="Jhon" />
    </div>,
    target
)

用this.props取到了那个实参

如果还需要将name等属性传递到Hi组件，继续这样一级级调用，从父往子，我的描述可能有问题，但这是react的单向数据流形式。this.props获取属性的这一方法我觉得就是你所说的静态方法。

另一个重要接口是state，主要用于获取状态并更新。

---

关于defaultProps的使用官网有一个例子写得很好

放在上面我写的代码中来说，当<Hello />组件在调用时没有传递参数，而你需要一个默认的name属性，对于Hello组件的每一次调用都有这个属性，那么在定义时通过defaultProps这个接口来设置，相当于构造函数的这种写法

function Hello () {
    this.name = "Jhon";
}

var hello = new Hello;
hello.name;  // Jhon

Answer 2

静态方法，说白了就是直接作为构造函数属性的方法。可以少声明全局变量，避免全局变量污染，比如我们常说的Date是一个构造函数，而Date.now就是静态方法。ES6为了保持其封装性，使用static在class内部定义的。反过来讲，class就是语法糖，其最终实现还是用了普通的赋值，例如

function P(){}
P.show=function(){
   alert('什么鬼？')
}
//这个show就是静态方法

Answer 3

class ClassName {
    static staticShow() {
        console.log('Hello!');
    }
    show() {
        console.log('Hello!');
    }
}
// 静态方法是这样调用的
ClassName.staticShow();
// 非静态是这样
var obj = new ClassName();
obj.show();

// 简单来说就是静态方法不需要实例化对象，是通过类直接调用的.