如何处理使用 useEffect 监听多个变化？

Question

我有多个正在收听的值以及要针对这些值执行的不同操作。问题是我不知道什么是防止它们在第一次渲染时运行的最佳方法。假设我有：

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

useEffect(()={
   // action 1
},[firstValue, secondValue, thirdValue])

useEffect(()={
   // action 2
},[fourthValue])

useEffect(()={
   // action 3
},[fifthValue])

我查看了 isMounted = useRef(false) 示例，但只有当您只有 1 个额外的 useEffect.

时它才有效

Answer 1

如果预期的功能是防止在初始渲染期间执行 useEffect 中的代码，只需将代码保留在 if 条件中，该条件将检查每个状态的值是否不是该状态的初始值.

例如：

const [firstValue, setFirstValue] = useState(null);
const [secondValue, setSecondValue] = useState(null);
const [thirdValue, setThirdValue] = useState(null);
const [fourthValue, setFourthValue] = useState(null);
const [fifthValue, setFifthValue] = useState(null);

useEffect(()={
if(firstValue!==null&&secondValue!==null&&thirdValue!==null){
   // action 1
}
},[firstValue, secondValue, thirdValue])

Answer 2

I looked into isMounted = useRef(false) example, but it works only if you have just 1 extra useEffect.

我想你假设你必须在第一个 useEffect 挂钩中更新 isMounted 引用组件。

请记住，每个渲染周期都会调用所有挂钩 按照它们声明的顺序。如果您希望所有三个 useEffect 挂钩跳过初始渲染，则不要更新 isMounted 引用，直到在所有三个挂钩都有机会运行至少一次。

示例：

const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState();

const isMountedRef = useRef(false);

useEffect(()={
  // action 1
}, [firstValue, secondValue, thirdValue]);

useEffect(()={
  // action 2
}, [fourthValue]);

useEffect(()={
  // action 3
}, [fifthValue]);

useEffect(() => {
  isMountedRef.current = true; // <-- now mutate the ref
}, []);

如何处理使用 useEffect 监听多个变化？

How to deal with listening to multiple changes using useEffect?

reactjs

react-hooks

use-effect