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 元素。
