自定义hooks之useLastState、useSafeState

自定义hooks之useLastState、useSafeState
useLastState

在某些情况下，可能需要知道状态的历史值，例如，希望在状态变化时执行某些操作，但又需要访问上一个状态的值，以便进行比较或其他操作。自定义 React Hook 可以帮助我们封装和重用组件逻辑。这里介绍的useLastState Hook 可以用于跟踪组件状态的历史变化，可以获取上一个状态的值。

以下是一个实现 useLastState Hook 的示例：

import { useState, useEffect } from 'react';function useLastState(initialState) {const [state, setState] = useState(initialState);const [lastState, setLastState] = useState(initialState);// 使用 useEffect 来监听 state 的变化，并在 state 变化时更新 lastStateuseEffect(() => {setLastState(state);}, [state]);// 返回一个包含当前 state 和上一个 state 的数组return [state, lastState, setState];
}export default useLastState;

上面的 useLastState Hook 接受一个初始状态值作为参数，并返回一个包含当前状态、上一个状态以及一个更新状态的函数的数组。

使用这个 Hook 的示例：

import React from 'react';
import useLastState from './useLastState';function MyComponent() {const [count, lastCount, setCount] = useLastState(0);const handleIncrement = () => {setCount(count + 1);};return (<div><p>Current Count: {count}</p><p>Last Count: {lastCount}</p><button onClick={handleIncrement}>Increment</button></div>);
}export default MyComponent;

在上述示例中，MyComponent 使用 useLastState Hook 来跟踪 count 的状态，并在界面上显示当前计数和上一个计数的值。当点击 “Increment” 按钮时，count 会增加，同时 lastCount 会更新为前一个状态的值。

使用场景

1. 图表组件：当需要在图表组件中跟踪数据的历史变化，以便在数据变化时执行比较或动画效果时，可以使用 useLastState。例如，在绘制图表时，可以比较当前数据和上一次数据，以确定何时触发图表的动画效果。

2. 计数器组件：在计数器组件中，可能希望显示当前计数值以及上一次计数值，以便用户可以看到计数的变化情况。

3. 表格排序：当用户点击表格列标题进行排序时，可以使用 useLastState 来跟踪上一次的排序状态，以确定排序的方向（升序或降序），并在表格中显示排序箭头。

useSafeState

useSafeState 是一个自定义 React Hook，用于确保在组件卸载后不再更新组件状态。这是为了解决异步操作（如数据请求或定时器）可能在组件卸载后仍然触发状态更新的常见问题，有助于处理异步操作和组件生命周期的常见问题的方式，确保组件卸载后不再更新状态，提高了代码的稳定性。

以下是一个实现 useSafeState Hook 的示例：

import { useState, useEffect, useCallback } from 'react';function useSafeState(initialState) {const [state, setState] = useState(initialState);const isMounted = useRef(true);useEffect(() => {isMounted.current = true;return () => {isMounted.current = false;};}, []);const safeSetState = useCallback((newState) => {if (isMounted.current) {setState(newState);}},[setState]);return [state, safeSetState];
}export default useSafeState;

使用这个 Hook 的示例：

import React, { useEffect } from 'react';
import useSafeState from './useSafeState';function MyComponent() {const [count, setCount] = useSafeState(0);useEffect(() => {const timer = setInterval(() => {setCount((prevCount) => prevCount + 1);}, 1000);return () => {clearInterval(timer); // 确保在组件卸载时清除定时器};}, [setCount]);return (<div><p>Count: {count}</p></div>);
}export default MyComponent;

在上述示例中，useSafeState Hook 用于跟踪计数的状态，同时在组件卸载时清除定时器。这确保了即使在组件卸载后，定时器仍然触发状态更新的情况下，不会引发 React 的警告或错误。

使用场景

1. 数据请求：在进行数据请求时，如果请求返回数据需要更新组件的状态，但在请求期间用户可能离开当前页面或组件已卸载，为了避免在组件卸载后更新状态而导致错误，可以使用 useSafeState。

2. 定时器：在使用定时器执行周期性任务时，如果组件在定时器触发时已经卸载，为了防止更新已卸载组件的状态，可以使用 useSafeState 来确保定时器回调函数不会触发状态更新。

3. 事件监听器：在添加 DOM 事件监听器时，如果组件卸载时没有正确移除事件监听器，可能会导致内存泄漏或不稳定的行为。useSafeState 可以用于确保在组件卸载时不再触发事件监听器的回调函数。

本文使用 文章同步助手 同步