了解 React 组件的构造函数

构建器是从类创建对象时自动调用的一种方法. 它可以处理初始设置的内容,例如默认对象的一些属性,或审查被传递的论点。

在 React 中,构造器没有什么不同. 它可以用来将事件处理器绑定到组件和/或初始化组件的本地状态. 在组件安装前启动constructor()方法,像 React 中的大多数东西一样,有几个规则,您在使用它们时应该遵循。

在使用this.props之前拨打super(props)

由于构建者的性质,直接出入门,这个props对象不可用,可能导致错误。

1constructor() {
2  console.log(this.props);
3}

相反,我们从constructor()中取出一个props值,并将其传递到super()方法:

1constructor(props) {
2  super(props);
3  console.log(this.props);
4}

当您调用super()方法时,它会调用React.Component在 React 组件中是React.Component的母类构件。

永遠不要在「constructor()」內呼叫「setState()」

您的组件构造器是设置组件的初始状态的完美场所,而不是像您在类中的其他方法一样使用setState(),您需要直接设置初始状态:

1constructor(props) {
2  super(props);
3
4  this.state = {
5    reptile: 'alligator',
6    color: '#008f68',
7  };
8}

构建器是您应该直接分配本地状态的唯一地方,我们组件中的任何其他地方,您应该依赖setState()

避免将值从this.props分配到this.state

当您在构建程序中设置初始组件状态时,应尝试避免从属性中设置值。

当你做这样的事情时:

1constructor(props) {
2  super(props);
3
4  this.state = {
5    reptile: props.reptile,
6  };
7}

您将失去在以后运行setState()并更新属性的能力。

而不是直接将属性分配给州,您可以通过拨打this.props.reptile来直接在代码中引用该属性。

将所有事件连接到一个地方

不是真正的规则或Gotcha,但值得注意的是,您可以在构建器中轻松连接您的事件处理器:

 1constructor(props) {
 2  super(props);
 3
 4  this.state = {
 5    // Sets that initial state
 6  };
 7
 8  // Our event handlers
 9  this.onClick = this.onClick.bind(this);
10  this.onKeyUp = this.onKeyUp.bind(this);
11  // et cetera...
12}

避免在「constructor()」中使用副作用或订阅

我得到它,你刚刚构建了一个新组件,你想要它从API中提取数据,并让它将值设置为状态。

错了!

对于会更新状态和其他副作用的订阅等事情,您应该在componentDidMount()中放出逻辑,该逻辑将在组件安装后立即启动,如果您更新组件内部的状态,则不会给你任何麻烦。

你甚至需要一个建设者吗?

构建器非常方便,但有时它只是太多了. 如果您没有计划保持组件的状态,并且没有绑定任何事件处理器,您根本不需要定义构建器。

事实上,如果你不需要状态或事件处理器,你可能根本不需要一个基于类的组件,你可以节省自己一些额外的打字,然后简单地使用一个 功能组件

Published At
Categories with 技术
Tagged with
comments powered by Disqus