[英]React hook useCallback without dependencies
Does it make sense to use useCallback
without deps for simple event handlers? 在没有deps的情况下将
useCallback
用于简单的事件处理程序是否有意义?
For example: 例如:
const MyComponent = React.memo(() => {
const handleClick = useCallback(() => {
console.log('clicked');
}, []);
const handleOtherClick = () => {
console.log('clicked');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
<button onClick={handleOtherClick}>Click me too</button>
</div>
);
});
What are the pros and cons for using useCallback
in this case? 在这种情况下使用
useCallback
利弊是什么?
Purpose of useCallback
does not depend on if you have dependencies or not. useCallback
用途不取决于您是否具有依赖项。 It's to ensure referential integrity. 这是为了确保参照完整性。 To get better performance.
为了获得更好的性能。 If you need that.
如果需要的话。
Because for flow having just function or function expression itself make code works well(I mean it does not require us to do any extra action to say referencing actual props etc). 因为对于仅具有函数或函数表达式本身的流,使代码可以很好地工作(我的意思是它不需要我们做任何额外的动作来引用实际的道具等)。 So
useCallback
is only about performance. 因此
useCallback
仅与性能有关。
Say we render pure component(instance of React.PureComponent
or functional component wrapped into React.memo
) 假设我们渲染纯组件(
React.PureComponent
实例或包装在React.memo
功能组件)
function MyComponent() {
const onChangeCallback = ...
return <SomePureComponent onChange={onChangeCallback} />;
}
here if onChangeCallback
is declared as just a function or arrow expression it will be re-created on each render. 在这里,如果将
onChangeCallback
声明为仅是函数或箭头表达式,它将在每个渲染器上重新创建。 So it will be referentially different. 因此,它在参考上会有所不同。 And nested child will be re-rendered each time while it does not have to.
嵌套子项每次都将重新渲染,而不必这样做。
Another case is listing this callback as dependency in other useCallback
, useMemo
, useEffect
. 另一种情况是将此回调作为其他
useCallback
, useMemo
和useEffect
依赖useMemo
useEffect
。
function MyComponent() {
const onChangeCallback = ...;
return <Child onChange={onChangeCallback} />
}
...
function Child({onChange}) {
useEffect(() => {
document.body.addEventListener('scroll', onChange);
return () => document.body.removeEventListener('scroll', onChange);
}, [onChange]);
}
Here we also will have referentially different onChange
in Child
without useCallback
. 在这里,在不使用
useCallback
情况下,我们还将在Child
具有参考上不同的onChange
。 So useEffect
will be run each time parent MyComponent
is called. 因此,
useEffect
将在每次调用父MyComponent
运行。 While we don't need it doing this. 虽然我们不需要这样做。
So yes, having empty dependencies list when you don't have actually any dependency is better then declaring function inline without useCallback
at all. 因此,是的,当您实际上没有任何依赖项时,将依赖项列表为空比将声明内联函数
useCallback
不使用useCallback
更好。
PS if your sub component is not really correct and has memory leak(say useEffect
does not return clean-up function) useCallback
actually may partially soften consequences. PS,如果您的子组件不是真的正确并且存在内存泄漏(例如
useEffect
不返回清除函数),则useCallback
实际上可以部分减轻后果。 For sure it should not be a goal(to write components with memory leaking) but to me it's 0.5 points for using useCallback
even in case of simple handlers 确保这不是目标(编写有内存泄漏的组件),但对我来说使用
useCallback
是0.5点,即使是简单的处理程序也是如此
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.