React useEffect如何监听字段无序的JSON对象内容变化

修复useEffect依赖触发异常 #

你遇到的核心问题是原生JSON.stringify会遵循对象键的实际存储顺序生成字符串，而Firebase返回的对象键顺序不固定，所以直接用它做依赖会出现判断错误。你可以自己实现一个稳定序列化函数，递归对所有对象键排序后再生成字符串：

const stableStringify = (obj) => {
  // 处理非对象、null的基础类型
  if (typeof obj !== 'object' || obj === null) {
    return JSON.stringify(obj);
  }
  // 处理数组
  if (Array.isArray(obj)) {
    return JSON.stringify(obj.map(stableStringify));
  }
  // 对对象的键排序后再序列化
  const sortedKeys = Object.keys(obj).sort();
  const sortedObj = sortedKeys.reduce((result, key) => {
    result[key] = stableStringify(obj[key]);
    return result;
  }, {});
  return JSON.stringify(sortedObj);
};

之后把useEffect的依赖替换为[stableStringify(data)]即可，只要对象内容完全一致，不管键的返回顺序如何，生成的字符串都会完全相同。

避免无效状态更新的优化思路 #

从根源上避免后续逻辑误触发的更优方案，是在更新状态前先做内容一致性校验，只有内容真的发生变更时才更新状态，示例代码如下：

const [data, setData] = useState(null);

const fetchFirebaseData = async () => {
  const firebaseRes = await 你的Firebase数据请求逻辑();
  // 只有内容变更才更新状态
  if (stableStringify(firebaseRes) !== stableStringify(data)) {
    setData(firebaseRes);
  }
}

如果你不想自己实现稳定序列化，也可以直接用成熟的深比较工具（比如lodash的isEqual，本身就不关心对象键的顺序），配合useRef存储上一次的值，在useEffect内部做判断，不需要修改状态更新逻辑：

import { isEqual } from 'lodash';
import { useEffect, useRef } from 'react';

const YourComponent = ({ data }) => {
  const prevDataRef = useRef();

  useEffect(() => {
    if (!isEqual(data, prevDataRef.current)) {
      // 你需要执行的业务逻辑
      prevDataRef.current = data;
    }
  }, [data]);

  // 其余组件逻辑
}

该方案性能优于序列化方案，尤其适合数据体量较大的场景。

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