前端 - useEffect如何知道是哪个deps触发的副作用?

Question

useEffect(()=>{    console.log('effect','触发对象：')},[a,b,c])

如上代码，在effectCallback中，我如何知道是哪个deps触发的函数

Answer 1

要想知道是哪个依赖变更的，那就是需要是判断哪个依赖状态值发生了变化。比如假设a的初始值是0,然后回调函数中判断如果a !== 0，进入了这个判断分支，那么就代表是a发生了变化，但是你监听的是多个依赖，很明显也会存在a,b,c又或者是其中2个同时发生变更的情况。如:

useEffect(()=>{    if(a){      console.log('effect','触发对象：',a)    }    if(b){      console.log('effect','触发对象：',b)    }    // 每一个判断条件需要根据依赖状态具体是什么值来做    if(c){      console.log('effect','触发对象：',c)    }},[a,b,c])

Answer 2

在您提供的代码中，useEffect 是一个 React Hook，它用于在组件渲染或更新后执行副作用操作。在这个例子中，有三个依赖项 a、b 和 c，它们被包含在 useEffect 的第二个参数数组中。

当依赖项 a、b 或 c 中的一个发生变化时，useEffect 中的回调函数就会被触发。然而，useEffect 本身并不知道具体是哪个依赖项发生了变化。它只会执行回调函数，并忽略触发的原因。

如果您需要知道具体是哪个依赖项触发了副作用，您可以在回调函数内部添加一些逻辑来跟踪这个信息。例如，您可以为每个依赖项添加一个唯一的标识符，并在回调函数中使用这个标识符来记录触发的原因。

下面是一个示例代码，演示了如何实现这个功能：

import React, { useEffect } from 'react';function Example() {  const a = 'depA';  const b = 'depB';  const c = 'depC';  useEffect(() => {    const depTriggered = Array.from(arguments).find(arg => arg !== undefined);    console.log('effect', '触发对象：', depTriggered);  }, [a, b, c]);  // 渲染组件的代码...}

在这个示例中，我们通过将依赖项作为 useEffect 的参数传递，并在回调函数中使用 Array.from(arguments).find(arg => arg !== undefined) 来找到触发副作用的依赖项。然后，我们将其记录到控制台中。

请注意，这种方法只是一种跟踪触发原因的方式，而不是在 useEffect 中区分不同的依赖项。如果您需要在回调函数中根据不同的依赖项执行不同的操作，您可能需要考虑使用其他设计模式或逻辑来处理这种情况。