Bootstrap

react中的useCallback 有什么作用?

        在 React 中,useCallback 是一个优化性能的 Hook,主要用于 记忆化(memoization)函数,从而防止在每次渲染时创建新的函数实例。具体来说,useCallback 可以帮助你确保某个函数只会在依赖项发生变化时才会重新创建,否则它会返回上一次的函数引用。

  • 适用场景:函数作为 props 传递给子组件,或者作为 useEffect 依赖项时,可以使用 useCallback 优化性能。
  • 当函数比较简单或不传递给子组件时,没有必要使用 useCallback。React 会自动优化简单的函数,不需要显式缓

  • 举例一:传递函数给子组件: 当你将一个函数作为 prop 传递给子组件时,如果该函数在每次父组件渲染时都会重新创建,子组件也会重新渲染(如果该函数作为依赖项)。通过 useCallback,你可以确保只有在相关依赖变化时才会创建新的函数。
  • import React, { useState, useCallback } from 'react';

    function Child({ onClick }) {
      console.log("Child rendered");
      return <button onClick={onClick}>Click me</button>;
    }

    function Parent() {
      const [count, setCount] = useState(0);

      // 使用 useCallback 确保只有当 count 改变时,onClick 才会更新
      const handleClick = useCallback(() => {
        setCount(count + 1);
      }, [count]);  // 依赖于 count

      return (
        <div>
          <Child onClick={handleClick} />
          <p>Count: {count}</p>
        </div>
      );
    }

    export default Parent;
    举例2 :与 useEffect 结合使用: useEffect 会在依赖项发生变化时重新运行,如果传给 useEffect 的回调函数总是被重新创建,可能会导致不必要的副作用执行。使用 useCallback 可以确保回调函数只有在必要时才被重新创建。

    import React, { useState, useEffect, useCallback } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      const memoizedCallback = useCallback(() => {
        console.log('Callback called');
      }, []); // 只有在依赖数组为空时,回调函数才会创建一次

      useEffect(() => {
        console.log('Effect ran');
        memoizedCallback();
      }, [memoizedCallback]); // 使用 memoizedCallback 作为 effect 的依赖

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }
     

;