创建功能组件时,例如:
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使用相同的功能(给定依赖项没有更改(,从而使支架没有触发任何更新。
所以,如果您的孩子组件是:
,请更好地回答您的问题- 属质组件
- 具有应有componentupdate的组件检查是否更改了回调
然后,UseCallback将有助于确保正确的行为并避免不必要的渲染。
哇。忘了我什至问了这个问题。无论如何,现在更大,更明智。
要清楚,我在问题中的假设部分是正确的。
但是,usecallback防止函数ref的变化这一事实与该特定组件无关,因为标准功能性反应组件每次出于任何原因都会重新渲染其父时。因此,将一致的裁判传递给道具不会改变。
唯一发挥作用的是,当相关组件包裹在"备忘录"
中时const mycomponent = memo((({... props}(=&gt;'这是我的组件'(
包裹在备忘录中时,它的行为类似于基于旧类的纯组件,因为它只会允许在道具或状态变化上呈现流程。现在,在那一刻,通过匿名功能作为道具会伤害这一点,并导致每次父母每次渲染流动。这就是UseCallback真正有用的地方。