usePrevious钩子

export function usePrevious<T>(value: T): T | undefined {const ref = useRef<T>();useEffect(() => {ref.current = value;}, [value]);return ref.current;
}

注：更多好用的性能钩子网站推荐：https://react-hooks-library.vercel.app/core/usePrevious

原因

usePrevious 是一个自定义 Hook，用于记录上一次的状态，以便在下一次渲染时进行比较。使用 usePrevious 可以提升性能，并确保在每次渲染时都有上一次的状态值可供比较。这对于需要比较前后值的场景非常有用，例如图表的更新和事件监听器的添加。

举例说明

  // 使用 usePrevious 钩子函数来记录上一次的 option 和 onClick 值const prevOption = usePrevious(option);const prevClickEvent = usePrevious(onClick);useEffect(() => {// ...省略部分逻辑   let chartInstance: ECharts | null = null;// 如果 option 或 onClick 值发生变化，则重新渲染try {if (!isDeepEqual(prevOption, option, ["formatter"])) {chartInstance.setOption(option);}if (onClick && typeof onClick === "function" && onClick !== prevClickEvent) {chartInstance.on("click", onClick);}} catch (error) {chartInstance && chartInstance.dispose();}}}, [option, onClick, prevOption, prevClickEvent]);

如上面代码，prevOption 和 prevClickEvent 使用 usePrevious 自定义 Hook 来存储前一个值的变量，作用是比较当前的 option 和 onClick 值与上一次的值是否相等。如果相等，则表示没有发生改变，不需要更新图表。通过比较前后值，可以避免不必要的更新和重复渲染，提高代码的性能和效率。