函数组件也有生命周期？那React Hooks来给你一招！

前端

2023-09-21 15:08:15

之前，很多小白程序员会问我，为什么我要使用函数组件？类组件不是更好吗？

我回答：函数组件更轻巧、灵活性强、维护方便。特别是当你用React Hooks之后，函数组件可以任意扩展，用起来一点也不比类组件差。

今天我就来给你介绍一下如何使用React Hooks来给函数组件添加生命周期。

React Hooks是一个允许你在函数组件中使用state和其他React特性（例如生命周期）的JavaScript库。这使得你可以编写更简洁、更可重用的组件。

在介绍如何使用React Hooks之前，我们先来了解一下React的生命周期。

React组件的生命周期包括以下几个阶段：

初始化：组件被创建并挂载到DOM之前。
挂载：组件被创建并挂载到DOM中。
更新：组件的状态或属性发生变化时。
卸载：组件从DOM中卸载。

可以使用生命周期钩子函数来监听组件生命周期的不同阶段。例如，可以使用componentDidMount钩子函数来在组件挂载后运行一些代码，可以使用componentWillUnmount钩子函数来在组件卸载前运行一些代码。

现在我们知道了React的生命周期和生命周期钩子函数，就可以开始介绍如何使用React Hooks来给函数组件添加生命周期了。

要使用React Hooks，你需要在你的项目中安装React Hooks库。你可以使用以下命令来安装React Hooks库：

npm install react-hooks

安装好React Hooks库后，你就可以在你的函数组件中使用React Hooks了。

要给函数组件添加生命周期，你可以使用useEffect钩子函数。useEffect钩子函数可以让你在组件挂载后、更新后或卸载前运行一些代码。

例如，你可以使用以下代码来给函数组件添加一个挂载后的生命周期：

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 在组件挂载后运行的代码
  }, []);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们使用了useEffect钩子函数来在组件挂载后运行一些代码。我们把这段代码放在了[]中，这表示这段代码只会在组件挂载后运行一次。

你还可以使用useEffect钩子函数来在组件更新后或卸载前运行一些代码。例如，你可以使用以下代码来给函数组件添加一个更新后的生命周期：

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 在组件更新后运行的代码
  }, [props]);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们使用了useEffect钩子函数来在组件更新后运行一些代码。我们把这段代码放在了[props]中，这表示这段代码只会在组件的props发生变化后运行。

你还可以使用useEffect钩子函数来在组件卸载前运行一些代码。例如，你可以使用以下代码来给函数组件添加一个卸载前的生命周期：

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 在组件卸载前运行的代码
    return () => {
      // 在组件卸载后运行的代码
    };
  }, []);

  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

export default MyComponent;