Question

在创建功能组件时，例如：

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

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

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

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

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

从理论上讲，这应该将同一回调函数实例用于任何一个特定的“ someMessage”，从而避免不必要的区分。

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

这已经到了我开始第二次猜测我自己的知识可能存在缺陷的地步。

有人可以告诉我我是否正确，而我所看到的几乎每个互联网例子都只是在做“不理想”？还是我对这个问题的认识不正确？

Answer 1

我假设您的意思是与渲染部分一样。渲染仍将发生。发生的情况是useCallback创建了该函数的备注版本。

因此，如果依赖关系没有变化，则无需创建该函数的另一个实例。

您的困惑必须来自文档中的这一行：

当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染（例如，shouldComponentUpdate）时，这很有用。

但这是指接收回调作为道具的子组件，并查看该道具以检查是否应渲染（PureComponents和shouldComponentUpdate）。使用useCallback时，使用了相同的功能（假设依赖关系未发生变化），因此该道具不会触发任何更新。

因此，如果您有以下子组件，则可以更好地回答您的问题：

PureComponents
具有shouldComponentUpdate的组件，用于检查回调是否更改

然后useCallback将帮助确保正确的行为并避免不必要的渲染，从而改善这种情况。

是否需要在功能性React组件中为功能道具使用useCallback挂钩，以免产生差异？

1 个答案: