usePrevious钩子
c
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 可以提升性能,并确保在每次渲染时都有上一次的状态值可供比较。这对于需要比较前后值的场景非常有用,例如图表的更新和事件监听器的添加。
举例说明
c
// 使用 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 值与上一次的值是否相等。如果相等,则表示没有发生改变,不需要更新图表。通过比较前后值,可以避免不必要的更新和重复渲染,提高代码的性能和效率。