Question

我在react.js。我正在学习react.js。我想知道何时使用constructor，如下所示，何时不使用。

constructor(props) {
   super(props);
}

Answer 1

如果您在构造函数中没有自己有用的东西，那么您就不需要了。

有用的例子包括：

根据初始道具设置初始状态
将函数绑定到this

问题中的构造函数是默认情况下会发生什么，如果你没有自己写的那个。因此，如果您没有自己的行添加，那么您可以安全地从组件类中删除它。

Answer 2

1）初始化state

class MyClass {
    constructor(props) {

        // when you want to iniitialize state
        // (ex. below is setting initial value for 'inputBoxValue')
        this.state = {
            inputBoxValue: 'initial value',
        };
    }
}

2）在this

中使用constructor

class MyClass {
    constructor(props) {

        // when you want to use `this` in `constructor`
        // super needs to be called first
        super();


        // that means, when you want to use `this.props`
        // in `constructor`, call it like below
        super(props);
    }
}

3）提供ref回调来访问DOM

class MyClass {
    constructor(props) {

        // when you want to create ref
        this.myElementRef = (ref) => {
            this.myElement = ref;
        };
    }
}

5）初始化第三方库

class MyClass {
    constructor(props) {

        // initialize third party libs, primarily non react libs
        this.myHelper = new MyHelperLibrary();


        // note: you can still access props without using `this`
        this.myHelper2 = new MyHelperLibrary(props.environment);
    }
}

4）绑定一些上下文（this），以防您希望将类方法传递到props到children。

class MyClass {
    constructor(props) {

        // when you want to `bind` context to a function
        this.myFunction = this.myFunction.bind(this);
    }
}

Answer 3

当您从父组件获取道具并且您在构造函数中使用这些道具来初始化状态时，您必须使用以下语法：

constructor(props) {
  super(props);
}

如果您没有使用props来初始化状态，那么您可以使用语法：

constructor() {
   super();
}

Answer 4

假设下面是React Component树

 <A>
   <B dataProps={this.state.data}/>
 </A>

this.state.data从父组件A传递组件到组件B。

现在，如果你想访问this.state.data，你需要使用

this.props.dataProps

来到你的构造函数quetition，

案例1：

constructor(props) {
  super(props);
}

在这种情况下， console.log(this.props.dataProps)会将dataProps映射到this.state.data，因为来自父组件this.props的{{1}} props已A，dataProps

案例2：

假设在构造函数中，只有this.state.data的调用没有super()。

props

在这种情况下， constructor() { super(); }

Answer 5

在React组件中，构造函数用于初始化状态。这是正确的地方。

当实现从React.Component派生的反应组件的构造函数时，应该调用 super 方法。

有关详细信息，建议您查找此React文档：https://reactjs.org/docs/react-component.html#constructor

Reactjs中的构造函数

5 个答案: