react useEffect可以作为watch监听值变化,进行其他操作用吗

阅读目录

但是如果useEffect的第二个参数有好多值，甚至包括对象，只要有一个变化，就会执行useEffect，该如何知道是哪个值的变化导致的useEffect的执行？

是的，React中的useEffect Hook 可以被用来作为“watch”监听特定变量或状态的变化，并在这些值发生变化时执行特定的操作。这是通过在useEffect的依赖数组中列出你想要监听的值来实现的。当依赖数组中的某个值发生变化时，useEffect的回调函数会被重新执行。

下面是一个简单的例子，展示了如何使用useEffect来监听count状态的变化并执行操作：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 使用useEffect监听count的变化
  useEffect(() => {
    // 当count变化时，这个函数会被执行
    document.title = `You clicked ${count} times`;
    
    // 注意：如果useEffect中有设置定时器或其他需要清理的副作用，
    // 应该返回一个清理函数。在这个例子中，因为我们没有这类操作，所以不需要返回。
  }, [count]); // <- count作为依赖项列在这里

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

在这个例子中，每当count的值因为按钮点击而更新时，useEffect的回调函数就会执行，从而更新文档的标题来反映最新的点击次数。
通过将count作为依赖数组[count]的一部分，我们告诉React只有当count的值变化时才需要重新运行这个副作用。

回到顶部

但是如果useEffect的第二个参数有好多值，甚至包括对象，只要有一个变化，就会执行useEffect，该如何知道是哪个值的变化导致的useEffect的执行？

当useEffect的依赖数组中有多个值，包括可能的对象，确实每次只要其中任何一个值发生变化，useEffect的回调函数就会执行。然而，React本身并不直接提供一种机制来告诉你具体是哪个依赖导致了重渲染或useEffect的重新执行。但是，你可以通过自定义的方式来间接实现这一需求。

回到顶部

方法一：手动比较

在useEffect内部，你可以对每个依赖值进行前后比较，以此来确定是哪个值发生了变化。虽然这种方法在处理简单类型（如数字、字符串）时较为直观，但对于复杂对象的深度比较则会相对复杂。

回到顶部

方法二：使用ref记录旧值

你可以为每个你关心其变化的依赖值使用useRef来保存它们的上一次值，然后在useEffect内部比较当前值与上一次的值。

import React, { useState, useEffect, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({ value: 0 });
  const prevCountRef = useRef(count);
  const prevObjRef = useRef(obj);

  useEffect(() => {
    if (prevCountRef.current !== count) {
      console.log('count发生了变化');
    }
    if (JSON.stringify(prevObjRef.current) !== JSON.stringify(obj)) {
      console.log('obj发生了变化');
    }
    
    // 更新ref的值以供下一次比较
    prevCountRef.current = count;
    prevObjRef.current = obj;
  }, [count, obj]); // <- count和obj都是依赖项

  return (
    // ...
  );
}

请注意，对于复杂对象的比较，上述示例使用了JSON.stringify，这在大多数情况下有效但可能不适用于所有情况，特别是当对象中包含循环引用或者特殊类型的值（如函数）时。
对于更精确的对象比较，你可能需要引入深比较的库，如lodash的_.isEqual方法。

回到顶部

方法三：定制化的Hook

对于更复杂的场景，你可以考虑创建自定义Hook，封装这些比较逻辑，使其更加复用和易于管理。

通过上述方法，你可以在一定程度上了解是哪个依赖值的变化触发了useEffect的执行，尽管这种方式需要手动实现额外的逻辑。

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/18178183.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！