ReactJS 是一种流行的 JaScript 库，用于构建用户界面。它通过组件化的方式让开发者能够更加方便地管理应用程序的复杂性。在开发 React 应用时，状态管理和生命周期方法是非常关键的两个概念。本文将围绕日常开发中常见的 ReactJS 状态与生命周期方法，详细解析如何掌控组件的生命周期。
React 组件的状态管理
在 React 中，状态（state）是用来存储组件内部数据的对象。与属性（props）不同，状态是组件内部的私有数据，且会随着用户操作和组件交互而发生变化。状态的变化会触发组件重新渲染，从而影响到界面展示。
使用 React Hook 之前，类组件是管理状态的主要方式。通过 this.state 来定义初始状态，使用 this.setState() 来更新状态。现代 React 中，更多地使用函数式组件结合 useState Hook 来管理状态。举个例子：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
在这个简单的示例中，useState(0) 定义了一个初始值为 0 的状态 count，并通过 setCount 函数来更新它。每当 count 发生变化，组件会重新渲染并展示新的状态。
React 生命周期方法详解
组件的生命周期可以简单理解为：从组件被创建到组件被卸载的整个过程。在这个过程中，React 提供了多个生命周期方法来让我们对组件的不同阶段进行控制。传统上，这些方法主要应用于类组件中，但在函数组件中，也可以通过 useEffect Hook 来实现类似的功能。
1. 组件的挂载阶段
组件首次渲染时，会经历挂载阶段。对于类组件来说，常用的生命周期方法是 componentDidMount。它会在组件初次渲染到 DOM 之后执行，适合用来执行一些异步请求或初始化操作。
componentDidMount() {
// 组件挂载后执行
fetchData();
}
在函数式组件中，可以使用 useEffect 模拟 componentDidMount：
useEffect(() => {
fetchData();
}, []);
这里的空数组表示 useEffect 只会在组件初次渲染时执行一次。
2. 组件的更新阶段
组件的更新阶段发生在状态或属性发生变化时。在类组件中，componentDidUpdate 是常用的方法，它会在组件更新后被调用：
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
// 只有当 count 改变时才执行
this.fetchNewData();
}
}
而在函数组件中，useEffect 同样可以处理组件更新：
useEffect(() => {
fetchNewData();
}, [count]); // 只有当 count 改变时执行
3. 组件的卸载阶段
当组件不再需要展示时，React 会将其从 DOM 中移除。这时 componentWillUnmount 生命周期方法会被调用，用来执行清理工作，比如取消订阅或清除定时器等。
componentWillUnmount() {
clearInterval(this.timer);
}
在函数组件中，同样可以通过 useEffect 实现清理工作：
useEffect(() => {
const timer = setInterval(() => {
console.log('定时任务');
}, 1000);
return () => {
clearInterval(timer); // 清除定时器
};
}, []);
这里的返回函数就是 useEffect 的清理机制，它会在组件卸载时执行。
掌控组件生命周期的技巧
为了更好地掌控 React 组件的生命周期，开发者可以遵循以下几条建议：
避免在渲染中执行副作用：副作用（如异步请求、订阅等）应当放在生命周期方法或 useEffect 中，而不是直接在渲染逻辑中执行。
清理工作要到位：当组件不再使用时，确保清除所有的订阅、定时器或其他异步操作，以避免内存泄漏。
谨慎使用生命周期方法：在类组件中，多个生命周期方法容易让代码显得臃肿。可以考虑使用 Hooks，使代码更加简洁易读。
通过合理地使用 React 的状态管理和生命周期方法，可以轻松地掌控组件的生命周期，提升代码的可维护性和可扩展性。
文章转载自：https://www.96tuji.cn/629.html