reactjs - 我是否需要在功能性 React 组件中对功能 Prop 使用 useCallback Hook 以避免差异？

Question

创建功能组件时，例如:

const SomeParentComponent = ({someMessage, ...otherProps})=>{
    const handleClick = ()=>{
        console.log(someMessage);
    };

    return <SomeComplexComponent onClick={handleClick} ...otherProps />
};

我对 React 的了解告诉我，SomeParentComponent 的每个渲染流，React 都会对返回的内容执行差异，因为 onClick 属性会在每个渲染流上发生变化(每次都是新声明的函数 [handleClick])。

为避免这种情况，您必须改为这样做:

...
    const handleClick = useCallback(()=>{
        console.log(someMessage);
    }, [someMessage]);
...

这在理论上应该导致相同的回调函数实例被用于任何一个特定的“someMessage”，从而避免不必要的差异。

这是我目前对事物的理解，但是无论我在网上哪里看，我所看到的功能组件内部回调的唯一示例，根本不用理会 useCallback。

它已经到了我开始怀疑我自己的知识可能存在缺陷的地步。

有人能告诉我我的说法是否正确，我在互联网上看到的几乎所有示例都只是“不太理想”吗？还是我对这个主题的了解不正确？

Answer 1

我假设您的意思是在渲染部分进行差异化。渲染仍然会发生。会发生什么 useCallback创建函数的内存版本。

因此，如果没有依赖项更改，则无需创建所述函数的另一个实例。

您的困惑一定来自文档中的行:

This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

但这指的是一个子组件，它接收回调作为 prop 并查看该 prop 以检查它是否应该呈现 (PureComponents 和 shouldComponentUpdate)。使用 useCallback 使用相同的函数(假设依赖关系没有改变)从而使 prop 不会触发任何更新。

因此，为了更好地回答您的问题，如果您有以下子组件:

1. 纯成分
2. 具有 shouldComponentUpdate 的组件检查回调是否改变

然后 useCallback 将有助于确保正确的行为并通过避免不必要的渲染来改进。