reactjs - 如何使用useEffect控制重新运行

Question

我对 useEffect 函数有点怀疑。我试图用 useEffect 阻止不必要的条件。问题是我可以用条件控制 useEffect 吗？有可能吗？示例代码，
这是正常的代码，

useEffect(() => {
   // do something
},[variableName]); 

我的期望代码和问题是，

useEffect(() => {
   // do something
},[variableName == 5]); // if it's true, Does the useEffect control the re-run?

它就像一个 if 条件，是否可以停止重新运行。我知道这很奇怪，但只是为了我的清晰理解。
谢谢你。

Answer 1

不，你不能。每次提供的变量更改时都会运行 useEffect。

您有两个选择:

1) 在 useEffect 中停止函数执行

useEffect(() => {
   if (variableName!=5) return // do nothing if condition is not met
   // do something
},[variableName]);

2) 声明一些 useState 并仅在您想运行 useEffect 时使用函数更改它

useEffect(() => {
   // do something
},[runEffect]);

const [runEffect, setRunEffect] = useState(true)

function runEffect(){
 setRunEffect(!runEffect)
}