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,
  };
}
相关推荐
JerryXZR5 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香7 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596939 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai15 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91524 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼1 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull2 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app