将函数作为道具传递时是否应该始终使用 useCallback ？

Question

我有下面的代码。如果我传递道具onUpdate并且onDelete只是函数 - javascript 中的函数对象 - 由于分析器中的道具更改，子组件总是重新渲染。该功能已重新创建，onUpdate现在onDelete是新道具，对我来说很有意义。

但是，如果我添加useCallback，他们不会感知到道具变化，因为这是useCallback. 所以这导致了几个问题。

• useCallback使用每个传递给孩子的函数有什么缺点？

• 使用没有任何好处，useCallback因为孩子会因为父母渲染而渲染？

• 为什么这不是默认行为？我知道这可能无法回答。

<UpdateGroupInput

    onUpdate={useCallback(

      group => {

        const index = groups.findIndex(searchedGroup => searchedGroup.id === group.id);

        const newGroups = groups.slice();

        newGroups[index] = group;

        onChange(items, newGroups);

        hideAddItemModal();

      },

      [groups, items, onChange]

    )}

    onDelete={useCallback(

      id => {

        const newGroups = groups.filter(group => group.id !== id);

        const newItems = items.filter(item => item.group !== id);

        onChange(newItems, newGroups);

      },

      [groups, items, onChange]

    )}

    groups={groups}

    visible={viewUpdateGroup}

  ></UpdateGroupInput>

Answer 1

UseCallback 只是一个特殊版本useMemo，仅用于函数。优点是阻止您在每次渲染时重新创建函数，这可能会导致您在组件树中进一步破坏任何其他记忆。像任何形式的代码优化一样，优点可能不是那么大，它增加了自己的开销，可能超过任何优点，并且还增加了代码的复杂性。引用 Knuth 的话“过早的优化是万恶之源”Kent C. Dodds 在他的博客https://kentcdodds.com/blog/usememo-and-usecallback上对此进行了更详细的介绍