Question

我对useEffect函数有一点疑问。我正在尝试通过useEffect停止不必要的情况。问题是我可以通过条件控制useEffect吗，这可能吗？示例代码

这是正常代码，

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

我的期望代码和问题是

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

这就像一个if条件，是否可以停止渲染。我知道这很奇怪，但我只是要求我澄清一下。

谢谢。

Answer 1

您可以在功能组件中设置布尔状态，如果满足特定条件，则将其设置为true，然后将该状态变量用作useEffect钩子的第二个参数

Answer 2

不。你不能每次更改变量时都会运行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)
}

如何使用useEffect控制重新运行

2 个答案: