ReactJS - 构造函数：React组件的基石

你好，有抱负的React开发者们！今天，我们将深入React的一个基本概念：构造函数。将构造函数视为房屋的基础——一切从这里开始。在本课结束时，你将能够像一个专家一样构建React组件！

ReactJS - Constructor

构造函数是什么？

在我们跳入React特定的细节之前，先来了解一下在一般编程术语中构造函数是什么。

构造函数是类中的一个特殊方法，当创建该类的对象时，会自动被调用。它就像组件的诞生——当你的组件出现时，首先发生的事情。

在React中，构造函数是我们设置组件初始状态和绑定事件处理器的地方。这是我们的组件第一次说“你好，世界！”

让我们来看一个基本示例：

class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("你好，我出生了！");
}

render() {
return <h1>欢迎来到React！</h1>;
}
}

在这个示例中，每当创建一个Welcome组件时，它都会在控制台输出“你好，我出生了！”。这就像组件的第一声啼哭！

初始化Props

现在，让我们来谈谈props。Props（属性）是父组件如何向子组件传递数据。在构造函数中，我们可以访问这些props并用来设置我们的组件。

下面是如何操作的：

class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`我收到了一个名字：${props.name}`);
}

render() {
return <h1>你好，{this.props.name}！</h1>;
}
}

在这个示例中，我们记录了传递给我们的Greeter组件的name prop。注意super(props)的调用——这至关重要！它调用父类（React.Component）的构造函数并传递props。记住，在构造函数中首先调用super(props)。

你可以用这个来：

为调试记录接收到的props
根据props执行计算
基于props设置初始状态（我们接下来会介绍）

初始化状态

状态是组件存储其可变数据的地方。构造函数是初始化这个状态的完美地方。让我们看看如何操作：

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return <h1>当前计数：{this.state.count}</h1>;
}
}

在这里，我们将状态初始化为count属性，设置为0。这是唯一一个你可以直接赋值this.state的地方。在其他地方，请使用this.setState()来更新状态。

你也可以使用props来初始化状态：

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}

// ... 组件的其他部分
}

在这个示例中，我们使用了一个prop（interval）来初始化我们的状态，如果没有提供prop，则默认值为1000。

事件绑定

构造函数的最后一个大用途是绑定事件处理器。在JavaScript中，类方法默认不会绑定。如果你忘记绑定并传递给事件处理器，调用方法时this将会是undefined。

下面是如何在构造函数中绑定方法的：

class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}

render() {
return (
<div>
<p>点击次数：{this.state.clicks}</p>
<button onClick={this.handleClick}>点击我！</button>
</div>
);
}
}

在这个示例中，我们在构造函数中绑定了this.handleClick。这确保当handleClick被调用时，this引用的是我们的组件实例，允许我们调用this.setState。

一切结合在一起

让我们创建一个使用所有这些概念的组件：

class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || '访客'
};
this.toggleLogin = this.toggleLogin.bind(this);
}

toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}

render() {
return (
<div>
<h1>你好，{this.state.username}！</h1>
<p>你{this.state.isLoggedIn ? '已经登录' : '没有登录'}。</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? '注销' : '登录'}
</button>
</div>
);
}
}

这个组件：

初始化props（username）
设置初始状态（isLoggedIn和username）
绑定toggleLogin方法

常见的构造函数方法

下面是一个表格，列出了你可能在构造函数中使用的一些常见方法：

方法	描述
`super(props)`	调用父构造函数
`this.state = {...}`	初始化状态
`this.methodName = this.methodName.bind(this)`	绑定方法
`console.log(props)`	记录接收到的props
`this.intervalId = setInterval(...)`	设置定时器或间隔

记住，构造函数只是你的组件旅程的开始。它是你为其他一切奠定基础的地方。明智地使用它，你的组件将会有一个好的开始！

我希望这个教程帮助你更好地理解了React的构造函数。继续练习，很快你就能在睡梦中构建React组件了！快乐编码！

Credits: Image by storyset