我是否需要在功能反应组件中使用usecallback挂钩作为函数prop,以避免扩展



创建功能组件时,例如:

const SomeParentComponent = ({someMessage, ...otherProps})=>{
    const handleClick = ()=>{
        console.log(someMessage);
    };
    return <SomeComplexComponent onClick={handleClick} ...otherProps />
};

我对React的知识告诉我,每个ParentComponent的每个渲染流,React都将对返回的内容进行差异,因为每次渲染流量都会改变onclick属性(每次新声明的函数[handleclick](。

要避免这种情况,您必须这样做:

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

从理论上讲,这应该导致相同的回调函数实例用于任何一个特定的" somemessage",因此避免了不必要的扩散。

这是我目前对事物的理解,但是无论我在网上的位置,我看到的功能组件中唯一的回调示例,根本不会打扰Usecallback。

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

有人可以告诉我我是否正确,几乎我见过的互联网上的每个示例都在做"不理想"吗?还是我对这个主题的知识不正确?

我假设您的意思是像渲染部分一样散布。渲染仍将发生。发生的事情是UuseCallback创建了该函数的回忆版。

因此,如果没有依赖性更改,则无需创建该功能的另一个实例。

您的混乱必须来自文档中的行:

将回调传递给优化的儿童组件时,这很有用,这些组件依靠参考均等性来防止不必要的渲染(例如,shordcomponentupdate(。

但这是指接收回调作为道具的子组件,并查看该道具以检查是否应该呈现(Purecomponents and sysexComponentUpdate(。使用UseCallback使用相同的功能(给定依赖项没有更改(,从而使支架没有触发任何更新。

所以,如果您的孩子组件是:

,请更好地回答您的问题
  1. 属质组件
  2. 具有应有componentupdate的组件检查是否更改了回调

然后,UseCallback将有助于确保正确的行为并避免不必要的渲染。

哇。忘了我什至问了这个问题。无论如何,现在更大,更明智。

要清楚,我在问题中的假设部分是正确的。
但是,usecallback防止函数ref的变化这一事实与该特定组件无关,因为标准功能性反应组件每次出于任何原因都会重新渲染其父时。因此,将一致的裁判传递给道具不会改变。

唯一发挥作用的是,当相关组件包裹在"备忘录"

中时

const mycomponent = memo((({... props}(=&gt;'这是我的组件'(

包裹在备忘录中时,它的行为类似于基于旧类的纯组件,因为它只会允许在道具或状态变化上呈现流程。现在,在那一刻,通过匿名功能作为道具会伤害这一点,并导致每次父母每次渲染流动。这就是UseCallback真正有用的地方。

相关内容

  • 没有找到相关文章

最新更新