React中useCallback如何优化项目

React 中提供了一些优化的 Hook ，我们该在什么时候使用它们呢？

这里介绍了 useCallback 如何优化 React 项目

useCallback 主要是用来优化父组件给子组件传递的方法

如下：父组件中把函数 hotTabClickHandle 传递给了子组件 SectionTabs

• 在SPA应用中每次切换路由回到 Home 页面，会生成一个新的 hotTabClickHandle 方法导致子组件 SectionTabs 被重新渲染一次，我们可以使用 useCallback 中阻止这个行为
• 当然也可以在 [] 中定义依赖，当依赖改变的时候在重新渲染子组件
• 在 SSR 中不用考虑这个问题，因为它都会重新请求一个页面

...

export default function Home(props: IProps) {
  ...

  // 定义传递给子组件的方法
  const hotTabClickHandle = useCallback((index: number, name: NamesType) => {
    setHotName(name)
  }, [])

  return (
    <>
      ...
            <SectionTabs tabClick={hotTabClickHandle} />
      ...
    </>
  )
}