React 组件生命周期

作者likuolei

以下是关于 React 组件生命周期的中文讲解，结合 Visual Studio Code（VSCode）环境，基于 npm 创建的 React 项目，内容简洁清晰，适合初学者。讲解包括生命周期的基本概念、类组件生命周期方法、中文支持、在 VSCode 中的实践以及调试方法。注意：函数组件主要使用 Hooks（如 useEffect）管理类似生命周期的行为，类组件生命周期 API 适用于传统 React 项目或维护旧代码。

1. 什么是 React 组件生命周期？

React 组件生命周期是指类组件从创建到销毁经历的各个阶段。每个阶段提供特定的生命周期方法，允许开发者在特定时刻执行逻辑（如初始化、更新 UI、清理资源）。

  • 特点：
  • 仅适用于类组件（继承 React.Component）。
  • 分为三个主要阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。
  • 支持中文数据处理，适合多语言界面。
  • 生命周期方法可以处理状态、Props、DOM 操作等。
  • 使用场景：
  • 挂载：初始化数据、请求 API。
  • 更新：响应状态或 Props 变化，更新 UI。
  • 卸载：清理定时器、事件监听器等。

2. 准备工作

确保 React 项目已创建

  • 使用 create-react-app 创建项目（参考前述“React 项目创建”指南）：
  npx create-react-app my-lifecycle-app
  cd my-lifecycle-app
  npm start
  • 项目在 http://localhost:3000 运行。

VSCode 配置

  • 安装扩展：
  • ESLint：检查代码规范。
  • Prettier：格式化代码。
  • Reactjs code snippets：快速插入 JSX 和组件代码。
  • Auto Rename Tag：同步编辑 HTML 标签。
  • 配置 ESLint 和 Prettier：
  • 安装依赖：
    bash npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks
  • 创建 .eslintrc.json：
    json { "env": { "browser": true, "es2021": true }, "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"], "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["react", "react-hooks"], "rules": {} }
  • 创建 .prettierrc：
    json { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80 }
  • 中文支持：
  • 确保 public/index.html 包含：
    html <meta charset="UTF-8">
  • 配置 VSCode 终端支持中文：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • 保存源文件为 UTF-8（右下角点击编码，选择“通过 UTF-8 保存”）。

3. React 组件生命周期阶段和方法

React 类组件的生命周期分为三个阶段：挂载、更新和卸载，每个阶段有特定的方法。

3.1 挂载阶段（Mounting）

组件创建并插入 DOM 时触发。

  • constructor(props)：
  • 初始化状态（this.state）和绑定方法。
  • 调用 super(props) 以确保 Props 可用。
  • static getDerivedStateFromProps(props, state)：
  • 静态方法，基于 Props 更新状态（很少使用）。
  • 返回状态更新对象或 null。
  • render()：
  • 返回 JSX，描述 UI 结构。
  • 必须是纯函数，不修改状态。
  • componentDidMount()：
  • 组件挂载到 DOM 后立即调用。
  • 适合发起 API 请求、设置定时器等。

3.2 更新阶段（Updating）

状态（this.state）或 Props 变化时触发。

  • static getDerivedStateFromProps(props, state)：
  • 同挂载阶段，用于 Props 变化时更新状态。
  • shouldComponentUpdate(nextProps, nextState)：
  • 控制是否重新渲染，返回 true（默认）或 false。
  • 用于性能优化。
  • render()：
  • 重新渲染 UI。
  • getSnapshotBeforeUpdate(prevProps, prevState)：
  • 在更新前捕获 DOM 状态（如滚动位置），返回快照值。
  • 很少使用。
  • componentDidUpdate(prevProps, prevState, snapshot)：
  • 组件更新后调用。
  • 适合处理 DOM 更新或发起新请求。

3.3 卸载阶段（Unmounting）

组件从 DOM 中移除时触发。

  • componentWillUnmount()：
  • 组件卸载前调用。
  • 用于清理定时器、事件监听器等。

4. 示例代码：完整生命周期

修改 src/App.js，展示生命周期方法：

import React, { Component } from ‘react’;
import ‘./App.css’;

class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0, message: ‘组件初始化’ };
this.handleClick = this.handleClick.bind(this);
console.log(‘constructor: 组件构造’);
}

static getDerivedStateFromProps(props, state) {
console.log(‘getDerivedStateFromProps: Props 或状态更新’);
return null; // 未修改状态
}

componentDidMount() {
console.log(‘componentDidMount: 组件已挂载’);
this.timer = setInterval(() => {
this.setState({ message: 计时：${new Date().toLocaleTimeString('zh-CN')} });
}, 1000);
}

shouldComponentUpdate(nextProps, nextState) {
console.log(‘shouldComponentUpdate: 检查是否更新’);
return true; // 允许更新
}

getSnapshotBeforeUpdate(prevProps, prevState) {
console.log(‘getSnapshotBeforeUpdate: 捕获更新前状态’);
return { prevCount: prevState.count };
}

componentDidUpdate(prevProps, prevState, snapshot) {
console.log(‘componentDidUpdate: 组件已更新’, snapshot);
}

componentWillUnmount() {
console.log(‘componentWillUnmount: 组件将卸载’);
clearInterval(this.timer); // 清理定时器
}

handleClick() {
this.setState({ count: this.state.count + 1 });
}

render() {
console.log(‘render: 渲染组件’);
return (

生命周期示例

计数：{this.state.count}

消息：{this.state.message}增加计数
);
}
}

export default App;

代码说明

  • constructor：初始化 count 和 message，绑定事件。
  • getDerivedStateFromProps：日志显示 Props/状态变化，未修改状态。
  • componentDidMount：启动定时器，每秒更新时间（中文格式）。
  • shouldComponentUpdate：允许更新，日志检查。
  • getSnapshotBeforeUpdate：捕获更新前的 count。
  • componentDidUpdate：日志显示快照。
  • componentWillUnmount：清理定时器。
  • render：渲染中文标题、计数和时间。
  • 中文支持：使用中文字符串（如“生命周期示例”）和 toLocaleTimeString('zh-CN')。

运行代码

  1. 保存 App.js，确保终端运行：
   npm start
  1. 浏览器在 http://localhost:3000 显示计数器和实时时间，点击按钮增加计数。
  2. 打开 Chrome 开发者工具（F12），查看控制台日志，观察生命周期方法调用顺序。

5. 调试生命周期

  1. Chrome 开发者工具：
  • 按 F12，使用 React Developer Tools 检查组件状态和 Props。
  • 查看控制台，观察生命周期方法日志。
  1. VSCode 调试：
  • 配置 launch.json：
    json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] }
  • 运行 npm start，按 F5 调试，设置断点检查生命周期方法。

6. 中文支持

  • JSX 中的中文：直接使用 UTF-8 编码的中文：
  <h1>生命周期示例</h1>
  • VSCode 配置：
  • 确保源文件为 UTF-8（右下角选择“通过 UTF-8 保存”）。
  • 配置终端：
    json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
  • HTML 配置：确保 public/index.html 包含：
  <meta charset="UTF-8">

7. 注意事项

  • 生命周期方法顺序：
  • 挂载：constructor → getDerivedStateFromProps → render → componentDidMount。
  • 更新：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate。
  • 卸载：componentWillUnmount。
  • 避免副作用：
  • render 和 getDerivedStateFromProps 应保持纯净，避免修改状态。
  • 副作用（如 API 请求）放在 componentDidMount 或 componentDidUpdate。
  • 现代替代：函数组件使用 useEffect 替代生命周期方法：
  useEffect(() => {
    console.log('挂载或更新');
    return () => console.log('卸载');
  }, [count]);

8. 常见问题

  • 生命周期方法未调用：
  • 确保方法拼写正确（如 componentDidMount 而非 componentDidMounted）。
  • 检查组件是否正确挂载。
  • 中文乱码：
  • 确认 public/index.html 有 <meta charset="UTF-8">。
  • 检查 VSCode 和终端编码为 UTF-8。
  • 定时器未清理：
  • 在 componentWillUnmount 中清理定时器或订阅。
  • 项目无法运行：
  • 清理缓存并重新安装：
    bash rm -rf node_modules package-lock.json npm install npm start

9. 获取途径

  • React：通过 npm 免费安装，访问 react.dev.
  • VSCode：可通过 grok.com、x.com、VSCode iOS/Android 应用免费使用（有限额）。付费订阅（如 SuperGrok）提供更高配额，详情见 x.ai/grok.
  • Node.js：免费下载，访问 nodejs.org.

如需更复杂的生命周期示例（如 API 请求、Props 变化处理）或函数组件 useEffect 的对比，请提供具体需求！

类似文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注