将函数作为道具传递时是否应该始终使用 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上对此进行了更详细的介绍