自定义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 变化时更新 lastState
  useEffect(() => {
    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 可以用于确保在组件卸载时不再触发事件监听器的回调函数。