ReactJS - 构造函数

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

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

props 的初始化

正如我们所知，每个 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

这用于使用 object 初始化状态

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 和状态初始化类似，必须正确绑定事件处理程序，以便在事件处理程序中正确访问 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 组件中非常重要。它的主要工作是以这样一种方式设置组件，即正确配置属性、状态和事件，并准备好由组件事件和渲染方法访问。