React中usecallback怎么正确使用

useCallback是一个用来缓存函数的Hook，用来解决函数组件中函数重新创建导致子组件重新渲染的问题。正确使用useCallback可以提高性能，避免不必要的渲染。

useCallback接受两个参数，第一个参数是一个函数，第二个参数是一个依赖数组。当依赖数组中的值发生变化时，函数会重新创建，否则会返回缓存的函数。

下面是一个示例，演示了如何正确使用useCallback：

import React, { useState, useCallback } from 'react';const App = () => {  const [count, setCount] = useState(0);  const handleClick = useCallback(() => {    setCount(count + 1);  }, [count]);  return (    <div>      <h1>{count}</h1>      <button onClick={handleClick}>Increase Count</button>    </div>  );};export default App;

在上面的示例中，handleClick函数会在count发生变化时重新创建，否则会返回缓存的函数。这样可以避免不必要的渲染，提高性能。