ReactJS - 构造函数

更新于 2025/3/23 5:52:17

一般来说，类中的构造函数方法用于设置新创建对象的初始值。React 也使用构造函数()来实现相同的初始化目的。然而在 React 中，构造函数也用于状态初始化和事件绑定目的。

让我们在本章中学习如何在 React 组件中使用构造函数。

props 的初始化

众所周知，每个 React 组件都会有 props 和状态。应该使用 super 关键字在构造函数中初始化 props。如果在基于类的 React 组件中未正确初始化 props，则 this.props 将无法正常工作并引入错误。让我们使用适当的构造函数方法创建一个简单的组件。

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>
   );
}

组件将呈现如下所示的欢迎消息 −

状态的初始化

与 props 初始化类似，状态的初始化非常重要，可以在构造函数中完成。通常，React 提供了不同的方法来设置和获取组件中的状态信息。它们如下 −

使用 this.state = obj

这用于使用对象初始化状态

this.state = {
    pageSize: 10
}

使用 this.state.*

这用于访问状态信息。 (this.state.pageSize)

使用 this.setState()

它是一个接受对象或 lambda 函数的函数。用于设置状态信息

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

让我们创建一个具有适当状态初始化的简单组件

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}>更改欢迎消息</button></div>

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

步骤 3 − 在构造函数中绑定事件处理程序 this.changeMessageHandler

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

步骤 4 −添加事件处理程序并使用 this.setState

更新状态。

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>
   );
}

组件将呈现如下所示的欢迎消息 −