react中的Hook函数的useCallback和useMemo作用，语法，使用

hook函数的优点，useEffect函数：https://blog.csdn.net/kkkys_kkk/article/details/134878097?spm=1001.2014.3001.5501

目录

useCallback

作用

语法

使用

useMemo

作用

语法

使用

---

 useCallback 和 useMemo 都是 React 中的 Hook，都可以优化组件的性能。

useCallback

作用

useCallback 用于缓存一个函数，避免在每次渲染时都重新创建函数实例。这对于需要将回调函数传递到子组件的场景是很有用的。当子组件需要 memoization 时，使用 useCallback 可以确保在依赖项相同的情况下返回相同的函数引用。

语法

与普通的函数定义不同，使用 useCallback 创建的函数可以被缓存，以免在每次执行时都重新创建新的函数。当组件的 props 或 state 发生变化时，使用 useCallback 缓存的函数会返回之前的引用，从而避免不必要的重复渲染。

const myCallback = useCallback(
    () => {
       函数处理(a)
      },
     [a] // 依赖项
)

useCallback 接受两个参数：

• 第一个参数是一个回调函数，即需要缓存的函数；
• 第二个参数是一个依赖数组，表示什么情况下需要重新创建新的函数。

使用

依赖项是count，所以只有count改变后，这个函数才会重新声明一次

如果传入空数组，那么就是第一次创建后就被缓存，即使后期count改变，我们得到的还是之前的count值

如果不传入第二个参数，，每次都会重新声明一次，拿到的就是最新的count值

import React, { useState, useCallback } from 'react';
import Button from './Button';

function App() {
  const [count, setCount] = useState(0);
  
  // 将回调函数缓存起来
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  
  return (
    <>
      <h1>Count: {count}</h1>
      <Button onClick={handleClick}>click me</Button>
    </>
  );
}

需要注意的是，useCallback 只有在组件的性能出现问题时，才需要使用。不是所有的函数都需要被缓存，因此应该具体问题具体分析，避免过度优化。此外，在依赖数组中传入不必要的值，可能会导致不必要的缓存和重复渲染，因此应该谨慎传入依赖数组。

useMemo

作用

useMemo 的作用是对一个函数的返回值进行缓存，只在依赖项变化时才重新计算。它可以帮助优化性能，避免不必要的计算开销。

与 useCallback 不同，useMemo 是用于缓存值的，而不是函数。

useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数

并且将函数执行结果返回给你

语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

同样的，useMemo也有两个参数

• 第一个参数是一个回调函数，即需要缓存的计算函数；
• 第二个参数是一个依赖数组，表示什么情况下需要重新计算结果。

使用

在 useState 中定义一个状态变量 str，并将其默认值设置为 'hello world'。

分别渲染str 和经过反转后的 reverseStr。由于 reverseStr 的计算依赖于 str 的值，因此这里使用了 useMemo。

组件中渲染了一个按钮，用于修改 str 状态值。当点击按钮时，str 的值就会变成 'hello'，这时候组件会重新渲染，并重新计算 reverseStr 的值

由于 reverseStr 使用了 useMemo 进行了优化，只有 str 的值发生变化时才会重新计算，从而避免了不必要的计算和渲染，提高了组件的性能。

import { useMemo, useState } from "react"
export default function App() {
   let [str, setStr] = useState('hello world')
   // 将str的值进行反转
   const reverseStr = useMemo(() => str.split('').reverse().join(''), [str])
   return (
     <div id="root" className="app-root">
      <div>{ str }</div>
      <div>{ reverseStr }</div>
      <button onClick={ () => setStr('hello') }>点击我</button>
    </div>
   )
}

需要注意的是，useMemo 可以用于缓存计算结果，但是不适合用于缓存组件。如果需要缓存整个组件，应该使用 React.memo。同时，应该注意在不必要的情况下，避免过度依赖数据，从而降低使用 useMemo 的效果。