Question

我是JavaScript新手。我最近开始学习ReactJS并阅读有关组件生命周期的内容。我收集的是，在组件初始化时，循环看起来像这样：

GetDefaultProps -> GetInitialState -> ComponentWillMount -> Render -> ComponentDidMount

我还读到在创建任何实例之前调用getDefaultProps()。如果我有以下代码：

class Sample extends React.Component {
    constructor(props) {
        super(props);
        alert("In constructor");
    }
    getDefaultProps() {
        alert("In getDefaultProps");
    }
    render() {
        return <div></div>;
    }
}

React.render(<Sample/>, document.getElementById('app'));

我认为它会警告＆＃34;在getDefaultProps＆＃34;中，然后＆＃34;在构造函数＆＃34;中。但只有＆＃34;在构造函数＆＃34;警报。为什么会这样？

Answer 1

现在在es6类上设置默认道具的方法是使用defaultProps属性

所以你会做这样的事情：

class Sample extends React.Component {
    constructor(props) {
        super(props);
        alert("In constructor");
    }
    render() {
        return <div></div>;
    }
}

Sample.defaultProps = {
   sampleProp: 'sample',
};

Answer 2

getDefaultProps（）可用于定义可通过this.props访问的任何默认道具。

假设您有一个子组件Child，并且您在父组件中使用该组件并传递一个prop testProp =＆＃34;这是测试道具＆＃34;。然后在子组件中，它可以用作this.props.testProps。但现在的情况是，无论如何你需要一个这个道具的值，并假设从父组件你没有发送这个道具到子组件。然后在这种情况下getDefaultProps会出现在图片中，你可以设置该prop的默认值，如果它由parent定义，那么它将被用作父组件的值，否则它将使用默认值。

因此我们可以将ES5中该道具的默认值设置为：

getDefaultProps() {
  testProp="This is default value for test prop"
}

在ES6中：

Sample.defaultProps = {
   testProp: 'This is default value for test prop',
};

Answer 3

defaultprops可以使用静态关键字

在类中定义

static defaultProps = {
   test: "default value of test"
}

React组件生命周期调用顺序

3 个答案: