javascript - 将函数作为 prop 传递时是否应该始终使用 useCallback？

Question

我有以下代码。如果我将 props onUpdate 和 onDelete 作为函数(javascript 中的函数对象)传递，则由于探查器中的 props 更改，子组件始终会重新渲染。该函数已重新创建，并且 onUpdate 和 onDelete 现在是新的 props，对我来说很有意义。

但是，如果我添加 useCallback，它们不会感知到 prop 更改，因为这是 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 的一个特殊版本，仅用于函数。优点是可以阻止您在每个渲染上重新创建该函数，这可能会导致您破坏组件树中的任何其他内存。

与任何形式的代码优化一样，其优点可能不是那么大，它增加了自己的开销，这可能超过任何优点，并且还增加了代码的复杂性。

引用高德纳的话“过早的优化是万恶之源”

Kent C. Dodds 在他的博客上对此进行了更详细的介绍 https://kentcdodds.com/blog/usememo-and-usecallback