"useEffect"的预期收益是什么?

问题描述

在React 文档表示他们说的钩子:

In the React documentation for hooks they say:

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]);

演示应用

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

Please help me understand this better by explaining:

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

谢谢！

推荐答案

为什么返回函数?return()=> {ignore = true};

从文档，

还有

在此示例中忽略了什么?

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

Initially in useEffect Hook ignore is set like, let ignore = false;.When fetchProduct function executes it checks for ignore is true and accordingly sets setProduct(json). This means we have state called product and setting the value in state using setProduct(json). This product in state is used to render details on page.

注意:由于将 [productId] 作为第二个参数传递给 useEffect ，因此 fetchProduct 函数将仅获得当 productId 更改时执行.

Note: As [productId] is passed as second argument to useEffect, fetchProduct function will only get executes when productId changes.

请参见通过跳过效果来优化性能.

这篇关于"useEffect"的预期收益是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！