什么是构造函数？

构造函数是一种用于初始化类中对象状态的方法。它在类中创建对象时自动调用。

React 中构造函数的概念是相同的。React 组件中的构造函数在组件挂载之前调用。当您为 React 组件实现构造函数时，需要在任何其他语句之前调用 super(props) 方法。如果您不调用 super(props) 方法，则在构造函数中 this.props 将是未定义的，并可能导致错误。

语法

在 React 中，构造函数主要用于两个目的：

1. 它用于通过将对象赋值给 this.state 来初始化组件的本地状态。
2. 它用于绑定组件中发生的事件处理程序方法。

注意：如果您既不初始化状态，也不绑定 React 组件的方法，则无需为 React 组件实现构造函数。

您不能直接在 constructor() 中调用 setState() 方法。如果组件需要使用本地状态，您需要直接使用 'this.state' 在构造函数中分配初始状态。构造函数仅使用 this.state 来分配初始状态，所有其他方法都需要使用 set.state() 方法。

示例

可以从以下示例中理解构造函数的概念。

App.js

Main.js

输出

当您执行上述代码时，您会得到以下输出。

与构造函数相关的最常见问题是：

1. 在每个组件中都必须有一个构造函数吗？

不，并非每个组件都必须有一个构造函数。 如果组件不复杂，它只需返回一个节点。

2. 在构造函数中必须调用 super() 吗？

是的，在构造函数中必须调用 super()。 如果需要在组件的构造函数中设置属性或访问“this”，则需要调用 super()。

当您运行上面的代码时，您会收到一个错误，提示 'this' is not allowed before super()。 因此，如果您需要在构造函数中访问 props，则需要调用 super(props)。

箭头函数

箭头函数是 ES6 标准的新功能。 如果您需要使用箭头函数，则无需将任何事件绑定到“this”。 在这里，“this”的范围是全局的，并且不限于任何调用函数。 因此，如果您使用的是箭头函数，则无需在构造函数中绑定“this”。

我们可以通过以下方式使用构造函数：

1) 构造函数用于初始化状态。

2) 在构造函数中使用 'this'

3) 初始化第三方库

4) 当您需要将类方法传递给子节点的 props 时，绑定一些上下文 (this)。