依赖项是函数能起到优化作用
可以把函数定义到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后拿到了数据,然后更新数据,最后将更新后数据渲染到屏幕 (编辑:52站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |