React 函数式组件里面有生命周期吗？没有怎么办？

React 函数式组件没有像类组件那样传统的生命周期方法，但是通过 React Hooks，可以在函数式组件中实现类似的生命周期行为。

• useEffect: 可以看作是类组件里的 componentDidMount, componentDidUpdate 和 componentWillUnmount 的结合体。它允许你在函数组件中执行副作用操作，比如数据获取、订阅或者手动更改 DOM。

• useRef: 获取组件中的 DOM 元素或保存可变变量。

一些场景

写过 Vue 的应该知道，Vue 可以在挂载和卸载 DOM 时候执行一些操作，比如 ECharts 的初始化，那么 React 有什么方法呢？

我们可以结合 useEffect 和 useRef 来实现：

import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

const EChartsComponent = () => {
  const chartRef = useRef(null); // 用于引用 DOM 元素
  const chartInstanceRef = useRef(null); // 用于保存 ECharts 实例

  useEffect(() => {
    if (chartRef.current) {
      // 初始化 ECharts 实例
      chartInstanceRef.current = echarts.init(chartRef.current);

      // 设置图表的配置项和数据
      const option = {
        title: {
          text: "ECharts 示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      chartInstanceRef.current.setOption(option);
    }

    // 在组件卸载时销毁 ECharts 实例
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.dispose();
      }
    };
  }, []); // 空依赖数组，确保只在组件挂载和卸载时运行

  return <div ref={chartRef} style={{ width: "600px", height: "400px" }} />;
};

export default EChartsComponent;

解释

useRef Hook：

const chartRef = useRef(null); 用于获取图表容器的 DOM 元素。
const chartInstanceRef = useRef(null); 用于保存 ECharts 实例，确保在组件卸载时可以正确销毁实例。

useEffect Hook：

useEffect 内部逻辑确保在组件挂载时初始化 ECharts 实例，并设置图表的配置和数据。
return () => { ... }; 部分确保在组件卸载时销毁 ECharts 实例，以避免内存泄漏。

DOM 元素引用：

ref={chartRef} 将 chartRef 绑定到 div 元素上，以便在 useEffect 中访问该 DOM 元素。