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

Question

我有下面的代码。如果我传递 propsonUpdate和onDelete函数（javascript 中的函数对象），则由于探查器中的 props 更改，子组件总是会重新渲染。该功能被重新创建，并且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仅用于函数。优点是可以阻止您在每个渲染上重新创建该函数，这可能会导致您破坏组件树中的任何其他记忆。

\n

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

\n

引用 Knuth \xe2\x80\x9c 过早的优化是万恶之源\xe2\x80\x9d

\n

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

\n