ReactJS：我如何知道哪个依赖项使 useEffect 挂钩运行/触发？

Question

代码示例：

useEffect(() => {

//I want to know which was the variable which made the useffect run. var1 or var2. how can I?

}, [var1, var2]);

使用哪个依赖项来使其运行？

Answer 1

无需第三方库和大量代码即可实现所需结果的最简单方法是分成useEffect两个useEffect钩子和一个处理程序。

解决方案1

const handler = () => {
    // ...some logic
};

useEffect(() => {
    // var1 has been changed
    handler();
}, [var1]);

useEffect(() => {
    // var2 has been changed
    handler();
}, [var2]);

解决方案2

用于useRef保持之前的状态，然后比较结果。

const prevVar1 = useRef();
const prevVar2 = useRef();

useEffect(() => {
    if(prevVar1.current !== var1) {
        // var1 has been changed
    }
    if(prevVar2.current !== var2) {
        // var2 has been changed
    }

    // and update the previous state
    prevVar1.current = var1;
    prevVar2.current = var2;

    // ...some logic
}, [var1, var1]);

解决方案3

或者使用use-what-c​​hange库