useCallback实例:
import React, { useState, useCallback } from "react";
function Example() {
const [count, setCount] = useState(0);
const incrementCount = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={incrementCount}>Click me</button>
</div>
);
}
export default Example;
在这个示例中,我们定义了一个名为 incrementCount
的回调函数,它将计数器的值增加1。为了使用 useCallback
,我们传递了一个依赖项数组 [count]
,表示只有当 count
改变时才需要重新创建该回调函数。
接下来,在页面上展示计数器和一个按钮,并将 incrementCount
回调函数作为按钮的点击事件处理程序。由于我们使用了 useCallback
,所以在每次渲染时,该回调函数都不会重新创建,避免了不必要的重复计算。
总之,useCallback
可以帮助我们缓存回调函数并避免渲染同样的函数引用,从而提高React组件的性能。