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