Question

在React documentation中，对于钩子，他们说：

”这还允许您处理本地的乱序响应效果内部的变量”

useEffect(() => {
    let ignore = false;
    async function fetchProduct() {
      const response = await fetch('http://myapi/product/' + productId);
      const json = await response.json();
      if (!ignore) setProduct(json);
    }

    fetchProduct();
    return () => { ignore = true };
  }, [productId]);

Demo app

请通过解释帮助我更好地理解这一点：

为什么返回一个函数？ return () => { ignore = true };
在此示例中忽略了什么？

谢谢！

Answer 1

为什么返回函数？ return（）=> {ignore = true};

从docs，

我们为什么要从效果中返回一个函数？这是可选的效果清除机制。每种效果都可能返回一个在其后清除的函数。这使我们可以保持彼此之间添加和删除订阅的逻辑。它们具有相同的作用！

和

React何时确切地清除效果？当组件卸载时，React进行清除。但是，正如我们之前所了解的，效果会在每个渲染中运行，而不仅仅是一次。这就是为什么React在下一次运行效果之前还要清除先前渲染中的效果的原因。我们将在下面稍后讨论为什么这有助于避免错误以及如何选择退出此行为，以防它造成性能问题。

在此示例中忽略了什么？

最初在useEffect中将挂钩ignore设置为let ignore = false;。执行fetchProduct函数时，它检查ignore是否为true并相应地设置setProduct(json)。这意味着我们将state称为product，并使用state在setProduct(json)中设置值。状态product用于呈现页面上的详细信息。

注意：由于将[productId]作为第二个参数传递给useEffect，因此fetchProduct函数仅在productId更改时才会执行。

请参见optimizing performance by skipping effects。

Answer 2

简而言之，useEffect替换了componentDidMount生命周期方法。基本上，它的componentDidMount，componentDidUpdate，componentWillUnmount都合而为一。

Answer 3

我们使用一个名为ignore的布尔标志来让我们的数据提取逻辑了解组件的状态（已安装/已卸载）。如果该组件已卸载，则应将该标志设置为true，以防止最终以异步方式解决了数据获取后设置组件状态的问题。卸载组件时，将调用return（useEffect的第二部分）。但是在这种情况下，由于查询更改时的依赖关系[query]，我们的组件被重新渲染，因此sideEffect被重新初始化。在您的IDE上运行this code，然后在浏览器（如chrome）中打开Devtools并清除控制台，然后在输入了写有react单词的输入中，尽可能快地添加char 2，然后立即删除char2。检查控制台以查看发生了什么

Answer 4

//all imports
function mufunc(){
  useEffect(()=>{ 
    const a = addEventListner('mouse' , console.log('mouse moves') )  //it prints when 
                                                                      //mouse moves
    return ()=>{
      removeEventListner(a)  //whenever the component removes it will executes
    }
  } ,[])
}

“ useEffect”的预期收益是什么？

4 个答案: