React 生命周期与组件状态管理的结合
2021-04-012.2k 阅读
React 生命周期概述
在 React 中，组件的生命周期是指从组件被创建到被销毁的整个过程。React 为开发者提供了一系列生命周期方法，这些方法在组件生命周期的不同阶段被自动调用，使得开发者能够在特定阶段执行特定的操作。例如，在组件挂载（mounting）阶段，可以发起网络请求获取数据；在组件更新（updating）阶段，可以根据新的 props 或 state 进行 UI 的重新渲染；在组件卸载（unmounting）阶段，可以清理定时器、取消网络请求等。
React 的生命周期方法大致可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。
挂载阶段
- constructor(props)：这是 ES6 类组件的构造函数。在 React 组件中，构造函数是可选的，如果需要初始化 state 或者绑定事件处理函数到实例，就可以定义构造函数。构造函数接收 props 作为参数，在使用 super(props) 调用父类构造函数后，才能在构造函数中访问 this.props。
import React, { Component } from'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
- static getDerivedStateFromProps(nextProps, prevState)：这是一个静态方法，在组件挂载和更新时都会被调用。它的主要作用是根据新的 props 来更新 state。该方法接收两个参数：即将到来的 nextProps 和之前的 prevState。它应该返回一个对象来更新 state，如果不需要更新 state 则返回 null。
import React, { Component } from'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
value: this.props.initialValue
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.initialValue!== prevState.value) {
return {
value: nextProps.initialValue
};
}
return null;
}
render() {
return (
<div>
<p>Value: {this.state.value}</p>
</div>
);
}
}
- render()：这是组件中唯一必须实现的方法。它负责返回描述组件 UI 的 JSX 元素。render 方法应该是纯函数，即不应该改变组件的 state，也不应该与浏览器 API 进行交互。
import React, { Component } from'react';
class MyComponent extends Component {
render() {
return (
<div>
<p>Hello, React!</p>
</div>
);
}
}
- componentDidMount()：在组件被插入到 DOM 后调用。这是一个适合发起网络请求、设置定时器、订阅事件等副作用操作的地方。因为此时组件已经挂载到 DOM 上，可以安全地访问 DOM 元素。
import React, { Component } from'react';
class MyComponent extends Component {
componentDidMount() {
console.log('Component has been mounted');
// 发起网络请求示例
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => {
this.setState({
apiData: data
});
});
}
render() {
return (
<div>
<p>Component is mounted</p>
</div>
);
}
}
更新阶段
- shouldComponentUpdate(nextProps, nextState)：该方法在接收到新的 props 或 state 时被调用，返回一个布尔值，用于决定组件是否应该重新渲染。默认情况下，只要 props 或 state 发生变化，组件就会重新渲染。通过在这个方法中进行逻辑判断，可以避免不必要的重新渲染，从而提高性能。例如，可以比较新旧 props 和 state 的某些值来决定是否需要重新渲染。
import React, { Component } from'react';
class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.value!== this.props.value) {
return true;
}
return false;
}
render() {
return (
<div>
<p>Value: {this.props.value}</p>
</div>
);
}
}
- static getDerivedStateFromProps(nextProps, prevState)：如前文所述，在更新阶段同样会被调用，用于根据新的 props 更新 state。
- render()：更新阶段也会调用 render 方法，根据新的 props 和 state 重新生成 UI。
- getSnapshotBeforeUpdate(prevProps, prevState)：在 render 方法之后，更新 DOM 之前被调用。它可以返回一个值，这个值会作为参数传递给 componentDidUpdate 方法。通常用于在更新 DOM 之前捕获一些 DOM 相关的数据，比如滚动位置。
import React, { Component } from'react';
class MyComponent extends Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
const div = this.divRef.current;
return div.scrollHeight - div.scrollTop;
}
componentDidUpdate(prevProps, prevState, snapshot) {
const div = this.divRef.current;
div.scrollTop = div.scrollHeight - snapshot;
}
render() {
return (
<div ref={this.divRef}>
{/* 内容 */}
</div>
);
}
}
- componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后被调用。如果组件更新导致 DOM 发生变化，可以在这里操作 DOM。snapshot 参数是 getSnapshotBeforeUpdate 方法返回的值。
import React, { Component } from'react';
class MyComponent extends Component {
componentDidUpdate(prevProps, prevState) {
if (prevProps.value!== this.props.value) {
console.log('Value has changed');
}
}
render() {
return (
<div>
<p>Value: {this.props.value}</p>
</div>
);
}
}
卸载阶段
- componentWillUnmount()：在组件从 DOM 中移除之前调用。可以在这里清理定时器、取消网络请求、解绑事件监听器等，以避免内存泄漏。
import React, { Component } from'react';
class MyComponent extends Component {
componentDidMount() {
this.timer = setInterval(() => {
console.log('Timer is running');
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div>
<p>Component is mounted</p>
</div>
);
}
}
组件状态管理基础
在 React 中，状态（state）是组件的一个重要概念。状态是组件内部的数据，它可以随着时间变化，并且状态的变化会触发组件的重新渲染，从而更新 UI。
状态的定义和初始化
在类组件中，状态通常在 constructor 中初始化。例如：
import React, { Component } from'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
在函数组件中，从 React 16.8 引入 Hook 后，可以使用 useState Hook 来定义状态。例如：
import React, { useState } from'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
</div>
);
};
状态的更新
在类组件中，通过调用 this.setState 方法来更新状态。this.setState 是一个异步操作，React 会批量处理多个 setState 调用，以提高性能。例如：
import React, { Component } from'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
在函数组件中，使用 useState Hook 返回的 set 函数来更新状态。例如：
import React, { useState } from'react';
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
};
React 生命周期与组件状态管理的结合
挂载阶段与状态初始化和加载数据
在挂载阶段，constructor 方法可以用于初始化状态。例如，一个显示用户信息的组件，可能在构造函数中初始化用户信息的状态为空对象：
import React, { Component } from'react';
class UserProfile extends Component {
constructor(props) {
super(props);
this.state = {
user: {}
};
}
componentDidMount() {
// 发起网络请求获取用户数据
fetch('https://example.com/api/user')
.then(response => response.json())
.then(data => {
this.setState({
user: data
});
});
}
render() {
return (
<div>
{this.state.user.name && <p>Name: {this.state.user.name}</p>}
{this.state.user.age && <p>Age: {this.state.user.age}</p>}
</div>
);
}
}
在这里，constructor 初始化了 user 状态为空对象，而 componentDidMount 方法在组件挂载后发起网络请求，并在获取到数据后更新 user 状态，从而触发组件重新渲染，显示用户信息。
更新阶段与状态变化和 DOM 操作
在更新阶段，shouldComponentUpdate 方法可以用于优化状态更新。例如，一个列表组件，只有当列表数据发生变化时才重新渲染：
import React, { Component } from'react';
class List extends Component {
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(nextProps.items)!== JSON.stringify(this.props.items)) {
return true;
}
return false;
}
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
}
当 props 中的 items 数据发生变化时，shouldComponentUpdate 返回 true，组件重新渲染。如果数据没有变化，则返回 false，避免不必要的重新渲染。
getSnapshotBeforeUpdate 和 componentDidUpdate 方法可以用于在更新 DOM 前后进行操作。比如，一个聊天框组件，当有新消息时，需要滚动到最新消息位置：
import React, { Component } from'react';
class ChatBox extends Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
const chatWindow = this.chatWindowRef.current;
if (prevProps.messages.length < this.props.messages.length) {
return chatWindow.scrollHeight;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
const chatWindow = this.chatWindowRef.current;
if (snapshot) {
chatWindow.scrollTop = snapshot;
}
}
render() {
return (
<div ref={this.chatWindowRef}>
{this.props.messages.map((message, index) => (
<p key={index}>{message}</p>
))}
</div>
);
}
}
在有新消息（即 messages 数组长度增加）时，getSnapshotBeforeUpdate 捕获当前聊天框的 scrollHeight，componentDidUpdate 则根据这个值将聊天框滚动到最新消息位置。
卸载阶段与状态清理
在卸载阶段，componentWillUnmount 方法可以用于清理状态相关的副作用。例如，一个使用定时器更新状态的组件，在组件卸载时需要清除定时器：
import React, { Component } from'react';
class TimerComponent extends Component {
constructor(props) {
super(props);
this.state = {
time: new Date()
};
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({
time: new Date()
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div>
<p>Current time: {this.state.time.toLocaleTimeString()}</p>
</div>
);
}
}
这样，在组件卸载时，定时器被清除，避免了内存泄漏和不必要的状态更新。
实际应用场景
表单处理
在表单组件中，生命周期和状态管理紧密结合。例如，一个登录表单，用户输入用户名和密码，提交表单时验证数据并显示结果。
import React, { Component } from'react';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
error: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const { name, value } = e.target;
this.setState({
[name]: value
});
}
handleSubmit(e) {
e.preventDefault();
if (this.state.username === '' || this.state.password === '') {
this.setState({
error: 'Username and password are required'
});
return;
}
// 模拟登录请求
setTimeout(() => {
if (this.state.username === 'admin' && this.state.password === '123456') {
this.setState({
error: 'Login successful'
});
} else {
this.setState({
error: 'Invalid username or password'
});
}
}, 1000);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={this.state.username}
onChange={this.handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={this.state.password}
onChange={this.handleChange}
/>
</label>
<button type="submit">Login</button>
<p>{this.state.error}</p>
</form>
);
}
}
在这个例子中，constructor 初始化了表单的状态，包括用户名、密码和错误信息。handleChange 方法在用户输入时更新状态，handleSubmit 方法在提交表单时验证数据并根据结果更新错误信息状态。
数据分页
对于需要展示大量数据并进行分页的场景，生命周期和状态管理协同工作。例如，一个博客文章列表，每页显示 10 篇文章：
import React, { Component } from'react';
class BlogList extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: 1,
posts: []
};
}
componentDidMount() {
// 假设这里有获取文章数据的 API
fetch('https://example.com/api/posts')
.then(response => response.json())
.then(data => {
this.setState({
posts: data
});
});
}
handlePageChange(page) {
this.setState({
currentPage: page
});
}
render() {
const postsPerPage = 10;
const startIndex = (this.state.currentPage - 1) * postsPerPage;
const endIndex = startIndex + postsPerPage;
const currentPosts = this.state.posts.slice(startIndex, endIndex);
return (
<div>
{currentPosts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</div>
))}
<div>
<button onClick={() => this.handlePageChange(this.state.currentPage - 1)} disabled={this.state.currentPage === 1}>Previous</button>
<button onClick={() => this.handlePageChange(this.state.currentPage + 1)} disabled={this.state.currentPage * postsPerPage >= this.state.posts.length}>Next</button>
</div>
</div>
);
}
}
在这个例子中，constructor 初始化了当前页码和文章列表状态。componentDidMount 方法在组件挂载后获取文章数据。handlePageChange 方法在用户点击分页按钮时更新当前页码状态，从而重新渲染显示不同页的文章。
注意事项和常见问题
避免在 render 方法中修改状态
在 React 中，render 方法应该是纯函数，不能在其中修改状态。例如，以下代码是错误的：
import React, { Component } from'react';
class BadComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
this.setState({
count: this.state.count + 1
});
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
这样会导致无限循环渲染，因为每次渲染都会触发状态更新，而状态更新又会导致重新渲染。
理解 setState 的异步性
在类组件中，setState 是异步的。这意味着在调用 setState 后，立即访问 state 可能不会得到更新后的值。例如：
import React, { Component } from'react';
class AsyncStateComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
count: this.state.count + 1
});
console.log(this.state.count); // 这里可能打印旧的值
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
如果需要在状态更新后执行某些操作，可以使用 setState 的回调函数：
import React, { Component } from'react';
class AsyncStateComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
count: this.state.count + 1
}, () => {
console.log(this.state.count); // 这里会打印更新后的值
});
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
正确使用生命周期方法
不同的生命周期方法有不同的使用场景，要正确使用它们。例如，不要在 componentWillMount 方法中发起网络请求，因为在 React 17 及以后，这个方法将被移除，推荐使用 componentDidMount 代替。同时，在使用 getDerivedStateFromProps 时，要注意它的返回值逻辑，避免不必要的状态更新。
总结 React 生命周期与组件状态管理结合的要点
React 生命周期与组件状态管理的结合是构建高效、可维护 React 应用的关键。在挂载阶段，合理初始化状态和加载数据；在更新阶段，通过优化状态更新和利用 DOM 相关的生命周期方法提升性能和实现特定功能；在卸载阶段，清理状态相关的副作用。同时，要注意避免常见问题，如在 render 中修改状态、理解 setState 的异步性等。通过深入理解和正确应用这些概念，开发者能够更好地掌控组件的行为，打造出优秀的前端应用。在实际项目中，不断实践和总结经验，将有助于更加熟练地运用 React 生命周期与组件状态管理的结合，提高开发效率和应用质量。