React - 构造函数

通常，class 中的 constructor 方法用于为新创建的对象设置初始值。React 同样使用 constructor() 来实现相同的初始化目的。但在 React 中，constructor 还用于 state 初始化和事件绑定。

在本章中，我们将学习如何在 React 组件中使用 constructor。

props 的初始化

众所周知，每个 React 组件都有 props 和 state。props 应该在 constructor 中使用 super 关键字进行初始化。如果在基于 class 的 React 组件中没有正确初始化 props，那么 this.props 将无法正常工作并引入 bug。让我们创建一个带有正确 constructor 方法的简单组件。

class Welcome extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div><h3>Welcome {this.props.name}</h3></div>
      )
   }
}

在这里，

• super(props) 将在 Welcome 组件中初始化 props。

• this.props.* 将提供对 props 细节的访问。

该组件可以按以下方式使用 −

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

组件将渲染如下所示的欢迎消息 −

state 的初始化

类似于 props 初始化，state 的初始化非常重要，可以在 constructor 中完成。通常，React 提供了多种方式来设置和获取组件中的 state 信息，具体如下 −

使用 this.state = obj

这用于使用对象初始化 state

this.state = {
   pageSize: 10
}

使用 this.state.*

这用于访问 state 信息。（this.state.pageSize）

使用 this.setState()

这是一个接受对象或 lambda 函数的函数。用于设置 state 信息

this.setState({
   pageSize: 20
})
this.setState((state, props) => ({
   pageSize: state.pageSize + 1
}))

让我们创建一个带有正确 state 初始化的简单组件

class Welcome extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         welcomeMessage: "Hello"
      }
   }
   render() {
      return (
         <div><h3>{this.state.welcomeMessage}, {this.props.name}</h3></div>
      )
   }
}

在这里，this.state 用于设置欢迎消息的默认（初始）值。该组件可以按以下方式使用 −

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

组件将渲染如下所示的欢迎消息 −

事件绑定

类似于 props 和 state 的初始化，事件处理器必须正确绑定，以便在事件处理器中正确访问 this。让我们在 Welcome 组件中创建一个新按钮来更改欢迎消息，并添加一个事件处理器来处理按钮的 onClick 事件，如下所示 −

import React from "react";

class Welcome extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         welcomeMessage: "Hello"
      }
      this.changeMessageHandler = this.changeMessageHandler.bind(this)
   }
   changeMessageHandler() {
      this.setState(prevState => (({
         welcomeMessage: prevState.welcomeMessage == "Hello" ? "Welcome" : "Hello"
      })));
   }
   render() {
      return (
         <div>
            <div><h3>{this.state.welcomeMessage}, {this.props.name}</h3></div>
            <div><button onClick={this.changeMessageHandler}>Change welcome message</button></div>
         </div>
      )
   }          
}
export default Welcome;

这里，

步骤1 − 添加一个带有 onClick 事件的按钮

<div><button onClick={this.changeMessageHandler}>Change welcome message</button></div>

步骤 2 − 将 this.changeMessageHandler 方法设置为 onClick 事件处理器

步骤 3 − 在 constructor 中绑定事件处理器 this.changeMessageHandler

this.changeMessageHandler = this.changeMessageHandler.bind(this)

步骤 4 − 添加事件处理器并使用 this.setState 更新 state。

changeMessageHandler() {
   this.setState(prevState => ({
      welcomeMessage: prevState.welcomeMessage == "Hello" ? "Welcome" : "Hello"
   }));
}

该组件可以按如下方式使用 −

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

组件将渲染欢迎消息，如下所示 −

总结

在基于 class 的 React 组件中，constructor 非常重要。它的主要任务是以正确配置 props、state 和事件的方式设置组件，使其能够被组件的事件和 render 方法访问。