依靠项是函数能起到优化浸染

可以把函数界说到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后拿到了数据，然后更新数据，最后将更新后数据渲染到屏幕

（编辑：湖南网）

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