React 之 useCallback(缓存函数)(十八)

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。

useCallback 是一个 Hook,所以应该在 组件的顶层 或自定义 Hook 中调用。你不应在循环或者条件语句中调用它。如果你需要这样做,请新建一个组件,并将 state 移入其中。

javascript 复制代码
//fn:想要缓存的函数。此函数可以接受任何参数并且返回任何值。
//dependencies:有关是否更新 fn 的所有响应式值的一个列表。响应式值包括 props、state,和所有在你组件内部直接声明的变量和函数。
//返回值:在初次渲染时,useCallback 返回你已经传入的 fn 函数在之后的渲染中, 
//如果依赖没有改变,useCallback 返回上一次渲染中缓存的 fn 函数;否则返回这一次渲染传入的 fn。
const cachedFn = useCallback(fn, dependencies)

跳过组件的重新渲染

默认情况下,当一个组件重新渲染时, React 将递归渲染它的所有子组件。

为了缓存组件中多次渲染的函数,你需要将其定义在 useCallback Hook 中。

javascript 复制代码
import { useCallback } from 'react';

function ProductPage({ productId, referrer, theme }) {
//为了缓存组件中多次渲染的函数,你需要将其定义在 useCallback Hook 中
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);
  // ...

防止频繁触发 Effect

javascript 复制代码
function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    function createOptions() { // ✅ 无需使用回调或函数依赖!
      return {
        serverUrl: 'https://localhost:1234',
        roomId: roomId
      };
    }

    const options = createOptions();
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ 仅当 roomId 更改时更改
  // ...

优化自定义 Hook

如果你正在编写一个 自定义 Hook,建议将它返回的任何函数包裹在 useCallback 中。

javascript 复制代码
function useRouter() {
  const { dispatch } = useContext(RouterStateContext);
  //这确保了 Hook 的使用者在需要时能够优化自己的代码
  const navigate = useCallback((url) => {
    dispatch({ type: 'navigate', url });
  }, [dispatch]);

  const goBack = useCallback(() => {
    dispatch({ type: 'back' });
  }, [dispatch]);

  return {
    navigate,
    goBack,
  };
}
相关推荐
Mr_Xuhhh35 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端