依赖项是函数能起到优化作用

可以把函数定义到useEffect中，这样添加的依赖变成了函数的参数，这样子，useEffect就无需添加xxx函数名作为依赖项了。

另外如果单纯把函数名放到依赖项中，如果该函数在多个effects中复用，那么在每一次render时，函数都是重新声明(新的函数)，那么effects就会因新的函数而频繁执行，这与不添加依赖数组一样，并没有起到任何的优化效果，那么该如何改善呐?

如果该函数没有使用组件内的任何值，那么就把该函数放到组件外去定义，该函数就不在渲染范围内，不受数据流影响，所以其永远不变

用useCallback hook来包装函数，与useEffect类似，其第二个参数也是作为函数是否更新的依赖项

常见于异步请求数据，先发后到，后发先到的问题，这就叫做竞态，如果该异步函数支持取消，则直接取消即可

那么更简单的做法，给异步加上一个boolean类型的标记值，就可以实现取消异步请求

function Article({ id }) { 

  const [article, setArticle] = useState(null); 

  useEffect(() => { 

    let didCancel = false; 

    async function fetchData() { 

      const article = await API.fetchArticle(id); 

      if (!didCancel) { 

        setArticle(article); 

      } 

    } 

    fetchData(); 

    return () => { 

      didCancel = true; 

    }; 

  }, [id]); 

  // ... 

} 

按照之前的规则，例如id=19，并且获取数据的时间为30s，变成了id=20，其获取数据的时间仅需5s，那么执行顺序应该如下：

id=19组件卸载，didCancle=true，当id=19异步请求收到数据时30s后，由于!didCancle === false，则不执行数据更新

id=20，因id改变，首先设置了didCancle=false，请求获取数据，5s后拿到了数据，然后更新数据，最后将更新后数据渲染到屏幕

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!