React useEffect - 在依赖数组中传递一个函数

IT技术 reactjs react-hooks use-effect usecallback
2021-05-09 20:37:58

为什么在将函数表达式传递到 useEffect 依赖项数组时会创建无限循环？函数表达式不会改变组件状态，它只是引用它。

// component has one prop called => sections

const markup = (count) => {
    const stringCountCorrection = count + 1;
    return (
        // Some markup that references the sections prop
    );
};

// Creates infinite loop
useEffect(() => {
    if (sections.length) {
        const sectionsWithMarkup = sections.map((section, index)=> markup(index));
        setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]);
    } else {
        setSectionBlocks(blocks => []);
    }
}, [sections, markup]);

如果标记改变了状态，我可以理解为什么它会创建一个无限循环，但它不是简单地引用部分属性。

对于那些正在寻找解决此问题的方法的人

const markup = useCallback((count) => {
        const stringCountCorrection = count + 1;
        return (
            // some markup referencing the sections prop
        );
// useCallback dependency array
}, [sections]);

所以我不是在寻找这个问题的代码相关答案。如果可能，我正在寻找有关为什么会发生这种情况的详细解释。

我对为什么然后只是简单地找到答案或解决问题的正确方法更感兴趣。

当 state 和 props 在所述函数中未更改时，为什么在 useEffect 依赖项数组中传递在 useEffect 之外声明的函数会导致重新渲染。

2个回答

问题是在每个渲染周期中，markup都会重新定义。React 使用浅层对象比较来确定值是否更新。每个渲染周期markup都有不同的参考。您可以使用useCallback来记住该函数，因此参考是稳定的。您是否为您的 linter 启用了react-hooks规则？如果你这样做了，它可能会标记它，告诉你原因，并提出这个建议来解决参考问题。

const markup = useCallback(
  (count) => {
    const stringCountCorrection = count + 1;
    return (
      // Some markup that references the sections prop
    );
  },
  [count, /* and any other dependencies the react linter suggests */]
);

// No infinite looping, markup reference is stable/memoized
useEffect(() => {
    if (sections.length) {
        const sectionsWithMarkup = sections.map((section, index)=> markup(index));
        setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]);
    } else {
        setSectionBlocks(blocks => []);
    }
}, [sections, markup]);

为什么当我传递函数表达式时会创建一个无限循环

“无限循环”是组件一遍又一遍地重新渲染，因为markup每次组件渲染并useEffect触发重新渲染时，该函数都是一个新的函数引用（内存中的指针），因为它是一个依赖项。

解决方案正如@drew-reese 所指出的，使用useCallback钩子来定义你的markup函数。

其它你可能感兴趣的问题
上一篇I18nManager.forceRTL 不会在首次应用加载时应用更改 下一篇Anet A8 - 前几层是垃圾