对于简单的事件处理程序,使用没有 deps 的 useCallback
是否有意义?
例如:
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>
);
});
在这种情况下使用 useCallback
的优缺点是什么?
最佳答案
useCallback
的用途不取决于您是否有依赖项。这是为了确保参照完整性。以获得更好的性能。如果你需要的话。
因为对于只有函数或函数表达式本身的流来说,代码运行良好(我的意思是它不需要我们做任何额外的 Action 来引用实际的 Prop 等)。所以 useCallback
只与性能有关。
假设我们渲染纯组件(React.PureComponent
的实例或包装在 React.memo
中的功能组件)
function MyComponent() {
const onChangeCallback = ...
return <SomePureComponent onChange={onChangeCallback} />;
}
如果 onChangeCallback
被声明为函数或箭头表达式,它将在每次渲染时重新创建。所以它会有所不同。嵌套的 child 每次都会重新渲染,而不必这样做。
另一种情况是将此回调列为其他 useCallback
、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]);
}
这里我们还将在 Child
中有引用不同的 onChange
而没有 useCallback
。因此 useEffect
将在每次调用父级 MyComponent
时运行。虽然我们不需要这样做。
所以是的,当您实际上没有任何依赖项时,拥有空的依赖项列表比在根本没有 useCallback
的情况下声明函数内联要好。
关于javascript - react Hook useCallback 没有依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57294549/