React中如何记忆Redux获取的值并与旧值对比？

要实现获取Redux中的值并对比其前后变化，你可以结合React的useRef和useEffect来保存上一次的状态值，以下是具体实现方案：

基础实现（针对原始类型值） #

如果Redux中存储的是数字、字符串这类原始类型，直接用useRef保存上一次的值即可：

import { useSelector } from 'react-redux';
import { useRef, useEffect } from 'react';

function YourComponent() {
  // 获取当前Redux状态值
  const currentValue = useSelector(state => state.data.value);
  // 用useRef存储上一次的值（初始为undefined）
  const previousValueRef = useRef();

  // 每次currentValue更新后，将当前值存入ref
  useEffect(() => {
    previousValueRef.current = currentValue;
  }, [currentValue]);

  const previousValue = previousValueRef.current;

  // 执行对比逻辑
  if (previousValue !== undefined && currentValue !== previousValue) {
    console.log(`值从 ${previousValue} 变为 ${currentValue}`);
    // 这里写你需要的业务逻辑
  }

  return (
    <div>
      <p>当前值：{currentValue}</p>
      {previousValue !== undefined && <p>上一次值：{previousValue}</p>}
    </div>
  );
}

逻辑说明 #

• useRef的.current属性不会触发组件重渲染，适合用来存储不需要引起UI更新的历史状态。
• useEffect的依赖项设为currentValue，确保每次Redux值变化时，都将最新值同步到ref中，供下一次渲染时对比。

封装为可复用的自定义Hook #

如果多个组件都需要这个逻辑，可以封装成自定义Hook：

import { useSelector } from 'react-redux';
import { useRef, useEffect } from 'react';

// 自定义Hook：获取Redux状态的上一次值
function usePreviousReduxValue(selector) {
  const currentValue = useSelector(selector);
  const previousValueRef = useRef();

  useEffect(() => {
    previousValueRef.current = currentValue;
  }, [currentValue]);

  return previousValueRef.current;
}

// 使用示例
function YourComponent() {
  const currentValue = useSelector(state => state.data.value);
  const previousValue = usePreviousReduxValue(state => state.data.value);

  if (previousValue !== undefined && currentValue !== previousValue) {
    console.log(`值变化：${previousValue} → ${currentValue}`);
  }

  return <p>当前值：{currentValue}</p>;
}

针对引用类型值（对象/数组）的处理 #

如果Redux中存储的是对象、数组这类引用类型，直接用!==对比的是内存地址，无法判断内容是否真的变化。此时需要用深对比来判断：

import { useSelector } from 'react-redux';
import { useRef, useEffect } from 'react';
// 可以用lodash的isEqual做深对比，也可以自己实现
import { isEqual } from 'lodash';

function YourComponent() {
  const currentValue = useSelector(state => state.data.complexObject);
  const previousValueRef = useRef();

  useEffect(() => {
    // 只有当内容真的变化时，才更新ref
    if (!isEqual(currentValue, previousValueRef.current)) {
      previousValueRef.current = currentValue;
    }
  }, [currentValue]);

  const previousValue = previousValueRef.current;

  if (previousValue !== undefined && !isEqual(currentValue, previousValue)) {
    console.log('复杂对象内容发生变化');
    // 执行对应业务逻辑
  }

  return <p>当前对象：{JSON.stringify(currentValue)}</p>;
}

注意事项 #

• 初始渲染时previousValue为undefined，对比时要先排除这个情况，避免误触发逻辑。
• 如果不想引入lodash，也可以自己实现深对比函数，或者针对具体的对象属性做浅对比（比如只对比对象的某个关键属性）。

内容的提问来源于stack exchange，提问作者Juan Ignacio