ReactJS - 构造函数

---

---

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

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

属性初始化

众所周知，每个 React 组件都有 props 和 state。应该使用 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}>Change welcome message</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>
   );
}

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

总结

构造函数在基于类的 React 组件中非常重要。它的主要工作是设置组件，以便正确配置 props、state 和事件，并准备好被组件事件和渲染方法访问。