React组件生命周期与Hooks的简明指南

React是一个用于构建用户界面的JavaScript库。在React中，组件的生命周期和Hooks是理解和构建高效应用的关键。本文将简明地介绍React组件的生命周期和Hooks的使用方法。🚀

一、React组件的生命周期

React组件的生命周期可分为挂载、更新和卸载三个阶段。

1. 挂载阶段

组件实例被创建并插入DOM中。

• constructor()：初始化状态。
• componentDidMount()：组件挂载后调用，可用于发送网络请求。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // 初始化state
  }

  componentDidMount() {
    // 组件挂载后执行
    console.log('组件已挂载');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

解释：

• constructor()：构造函数，用于初始化组件的状态 state。
• componentDidMount()：在组件挂载到DOM后立即调用，可进行数据获取或订阅。

2. 更新阶段

组件的状态或属性发生变化时触发。

• shouldComponentUpdate()：判断组件是否需要更新。
• componentDidUpdate()：组件更新后调用。

shouldComponentUpdate(nextProps, nextState) {
  // 返回false可阻止组件更新
  return nextState.count !== this.state.count;
}

componentDidUpdate(prevProps, prevState) {
  // 组件更新后执行
  console.log('组件已更新');
}

解释：

• shouldComponentUpdate()：通过比较新旧 props和 state，决定是否重新渲染组件。
• componentDidUpdate()：组件更新后，可以执行DOM操作或再次发起请求。

3. 卸载阶段

组件从DOM中移除时调用。

• componentWillUnmount()：清理工作，如清除计时器或取消网络请求。

componentWillUnmount() {
  // 组件卸载前执行
  console.log('组件将要卸载');
}

解释：

• componentWillUnmount()：在组件卸载和销毁之前调用，用于清理资源，防止内存泄漏。

二、Hooks简介

Hooks是React 16.8引入的新特性，允许在不编写类的情况下使用状态和其他React特性。

1. useState

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)：初始化 count为0，setCount用于更新 count的值。
• 点击按钮时，调用 setCount(count + 1)，状态更新，组件重新渲染。

2. useEffect

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    // 相当于componentDidMount和componentDidUpdate
    const timerID = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      // 相当于componentWillUnmount
      clearInterval(timerID);
    };
  }, []); // 空数组表示只在挂载和卸载时执行

  return <div>当前时间：{time.toLocaleTimeString()}</div>;
}

解释：

• useEffect()：在组件渲染后执行副作用操作，如数据获取或订阅。
• return中的函数用于清理工作，类似于 componentWillUnmount()。

三、类组件与Hooks的对比

解释：

• Hooks使函数组件具备类组件的所有功能，同时代码更简洁。

四、组件生命周期与Hooks的对应关系

graph TD
A[类组件生命周期] -->|挂载| B[constructor]
B --> C[componentDidMount]
A -->|更新| D[shouldComponentUpdate]
D --> E[componentDidUpdate]
A -->|卸载| F[componentWillUnmount]

G[函数组件Hooks] -->|状态| H[useState]
G -->|副作用| I[useEffect]

解释：

• 类组件的生命周期方法与函数组件中的Hooks有对应关系。
• useEffect()可以模拟 componentDidMount、componentDidUpdate和 componentWillUnmount。

五、使用自定义Hooks

自定义Hooks可以提取组件逻辑，方便复用。

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function WidthDisplay() {
  const width = useWindowWidth();
  return <div>窗口宽度：{width}px</div>;
}

解释：

• useWindowWidth()：自定义Hook，用于获取窗口宽度。
• 在组件中调用自定义Hook，获取所需的状态或行为。

六、注意事项 ⚠️

• Hooks只能在函数组件中使用，不可在类组件中使用。
• 不要在循环、条件或嵌套函数中调用Hooks，必须在函数组件的顶层调用。

七、总结

通过学习React组件生命周期和Hooks，可以更好地理解组件的工作流程，编写出高效、简洁的代码。Hooks的出现，使得函数组件能够替代大部分类组件的功能，使代码结构更加清晰。💡

希望本文能帮助您快速上手React组件的生命周期与Hooks的使用！😊