网站模板带后台下载,大同住房和城乡建设网站,个人网站做公司网站,品牌网站设计制作一般多少钱概述
useCallback缓存的是一个函数#xff0c;主要用于性能优化!!! 基本用法
如何进行性能的优化呢#xff1f;
useCallback会返回一个函数的 memoized#xff08;记忆的#xff09; 值#xff1b;在依赖不变的情况下#xff0c;多次定义的时候#xff0c;返回的值是…概述
useCallback缓存的是一个函数主要用于性能优化!!! 基本用法
如何进行性能的优化呢
useCallback会返回一个函数的 memoized记忆的 值在依赖不变的情况下多次定义的时候返回的值是相同的 语法
const memoizedCallback useCallback(() {doSomething(a, b);},[a, b],
);
通常使用useCallback的目的是不希望子组件进行多次渲染并不是为了函数进行缓存在使用 React.memo 时对于对象类型的 props只会比较引用浅对比。但是因为组件每次更新都会创建新的 props 值比如新的对象、事件处理程序等函数组件的特性。这就导致React.memo 在处理对象类型的 props 时会失效每次的 props 都是新对象。但是我们还是想让 React.memo 在处理对象类型的 props 时也有效。为了让 React.memo 处理对象类型的 props 有效只要在组件更新期间保持对象类型引用相等即可 这时候就要用到以下两个 Hooks
useCallback Hook记住函数的引用在组件每次更新时返回相同引用的函数。useMemo Hook记住任意数据数值、对象、函数等在组件每次更新时返回相同引用的数据【功能之一】 示例
import {useCallback, useState} from react;export default function UseCallback() {let [firstName, setFirstName] useState(张);let [lastName, setLastName] useState(三);let getFullName useCallback(() {return firstName lastName}, [firstName, lastName])return (div姓名{getFullName()}/div)
}
缓存了一个函数可以在组件中使用!!! 演示示例
使用场景在使用 React.memo 时为了组件每次更新时都能获取到相同引用的函数就要用到 useCallback Hook
注意需要配合 React.memo 高阶函数一起使用。
作用记忆传入的回调函数这个被记住的回调函数会一直生效直到依赖项发生改变 解释
第一个参数必选需要被记忆的回调函数。第二个参数必选依赖项数组用于指定回调函数中依赖用到的数据类似于 useEffect 的第二个参数。即使没有依赖也得传入空数组[]此时useCallback 记住的回调函数就会一直生效。返回值useCallback 记住的回调函数。useCallback 记住的回调函数会一直生效或者说会一直返回同一个回调函数直到依赖项发生改变。
import React, { memo, useState, useCallback, useRef } from reactconst App memo(() {const [count, setCount] useState(0)const [money, setMoney] useState(1000)// 初始写法const help useCallback(() {setCount(count - 1)}, [count])// 优化写法useRef--在组件多次渲染时返回的是同一个值// 这种写法容易陷入闭包陷阱const help useCallback(() {setCount(count - 1)}, [])// 推荐优化写法const countRef useRef();countRef.current count;const help useCallback(() {setCount(countRef.current - 1)}, [])return (divh1计数器/h1div豆豆被打了{count}次/divdiv金钱{money}/divbutton onClick{() setCount(count 1)}打豆豆/buttonbutton onClick{() setMoney(money 100)}加钱/buttonhr /{count 5 ? DouDou count{count} help{help}/DouDou : 豆豆被打死了}/div)
})export default App Doudou.jsx
// 子组件
const DouDou memo(({ count, help }) {console.log(豆豆组件渲染)return (divh3我是豆豆组件{count}/h3button onClick{help}续命/button/div)
})
export default Doudou 总结
要配合 memo 不然可能反而会降低性能
当需要将一个函数传递给子组件最好使用 useCallback 进行优化将优化之后的函数传递给子组件当需要将一个函数传递给子组件时最好使用useCallback进行优化将优化之后的函数传递给子组件 尽量不要使用 useCallback
我建议在项目中尽量不要用 useCallback大部分场景下不仅没有提升性能反而让代码可读性变的很差。 useCallback 大部分场景没有提升性能
useCallback 可以记住函数避免函数重复生成这样函数在传递给子组件时可以避免子组件重复渲染提高性能。 基于以上认知很多人包括我自己在写代码时只要是个函数都加个 useCallback是你么反正我以前是。
但我们要注意提高性能还必须有另外一个条件子组件必须使用了 shouldComponentUpdate 或者 来忽略同样的参数重复渲染。
假如 ExpensiveComponent 组件只是一个普通组件是没有任何用的。比如下面这样 必须通过 React.memo 包裹 ExpensiveComponent 才会避免参数不变的情况下的重复渲染提高性能。 所以useCallback 是要和 shouldComponentUpdate/React.memo 配套使用的你用对了吗当然我建议一般项目中不用考虑性能优化的问题也就是不要使用 useCallback 了除非有个别非常复杂的组件单独使用即可。 useCallback 让代码可读性变差
我看到过一些代码使用 useCallback 后大概长这样 在上面的代码中变量依赖一层一层传递最终要判断具体哪些变量变化会触发 useEffect 执行是一件很头疼的事情。
我期望不要用 useCallback直接裸写函数就好 在 useEffect 存在延迟调用的场景下可能造成闭包问题那通过咱们万能的方法就能解决 对 useCallback 的建议就一句话没事别用 useCallback。
