useCallback不会阻止不必要的重新渲染

时间:2020-02-23 11:40:43

标签: reactjs

自定义钩子-useBreadcrumbs:

const useBreadcrumbs = (arr: Crumb[] = [], crumbs: Function) => {
  useEffect(() => {
    crumbs(arr);
    return () => {
      crumbs([]);
    };
  }, [arr, crumbs]);
};

在合作伙伴组件中使用此钩子:

useBreadcrumbs([{ title: 'Breadcrumb title', url: '/custom-page' }], crumbs);

仪表板组件:

const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>([]);
const handleCrumbs = useCallback((data: Crumb[]) => {
  setBreadcrumbs(data);
}, []);

return (
  <Partners crumbs={handleCrumbs} />
);

在安装合作伙伴组件时,我遇到了重新渲染的无限循环。我不会将useEffect()与空的部门一起使用,因为这会导致详尽的部门棉绒错误。我阻止使用useCallback重新渲染。如果我从arr中删除了useEffect

useEffect(() => {
  crumbs(arr);
  return () => {
    crumbs([]);
  };
}, [crumbs]);

然后它不会无限循环,但出现错误:

ESLint: React Hook useEffect has a missing dependency: 'arr'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

如何避免在useCallback中出现这些循环?

1 个答案:

答案 0 :(得分:1)

您在此处创建一个全新的阵列:

useBreadcrumbs([{ title: 'Breadcrumb title', url: '/custom-page' }], crumbs);

这会导致useEffect的依存关系数组在useBreadcrumbs中发生更改,并调用一个函数来更新您的组件,从而导致无限循环。

解决方案是使用useMemo随时间保留阵列,而无需创建新阵列:

const arr = useMemo(() => [{ title: 'Breadcrumb title', url: '/custom-page' }], [])
useBreadcrumbs(arr, crumbs);

希望它会有所帮助:)