Question

在测试反应生命周期时，我发现了一个非常奇怪但令人困惑的问题：

var TestLifeCycle = React.createClass({
    getInitialState : function(){
        console.log('2');
    },
    getDefaultProps : function(){
        console.log('1');
    },
    render : function(){
        return null;
    }
});
ReactDOM.render(<TestLifeCycle test="hello world!"/>, document.body);

结果是：

1
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. 
2

注意警告： getDefaultProps将在反应生命周期的最初阶段调用。根据我的理解，正确的控制台日志顺序是：

warning 
1
2

但在chrome下是：

1
warning 
2

getDefaultProps之前是否呼叫过ReactDOM.render？

Answer 1

是的，在render之前调用getDefaultProps。如文档中所述，在创建和静态存储类时会调用它：

getDefaultProps（）的结果将被缓存并用于确保如果未指定this.props.value将具有值父组件。

React理解的重点是有三个不同的层。虽然大多数OOP仅使用类和实例，但在响应中，您有组件，元素和实例。起初通常有点混乱。

组件是“类”，即您要创建的内容的一般规范。实例是此规范的呈现版本，即DOM节点。在反应中，你很少直接操纵实例，你最常使用的是元素。

元素是一个“中间”图层，用于定义特定组件元素在呈现之前应如何呈现。这是你写var elt = (<MyComponent prop1="bidule">)时得到的。元素是具有一些属性（props，key，ref和＆amp; type）的纯JavaScript对象。因此，在实际渲染之前很久就已存在属性。

阅读here或here，了解有关组件，元素和实例的更多信息。

Answer 2

在getDefaultProps方法之前调用

render。这是正确的行为。您可以通过执行以下操作来断言：

var TestLifeCycle = React.createClass({
    getInitialState : function(){
        console.log('2');
    },
    getDefaultProps : function(){
        console.log('1');
        return {className:'Test'}
    },
    render : function(){
        return null;
    }
});
ReactDOM.render(<TestLifeCycle className={this.props.className} test="hello world!"/>, document.body);

如果我们按照您的假设进行思考，并认为首先调用render。在此阶段，this.props.className将为undefined。

所以反应调用getDefaultProps来查看是否有任何默认道具要使用，然后在内部替换它们并正确渲染组件。

有关其他组件及其生命周期的更多信息，请参阅： https://facebook.github.io/react/docs/component-specs.html#getdefaultprops

反应生命周期：在ReactDOM.render之前调用getDefaultProps？

2 个答案: