关键词排行优化网站,西昌市住房与城乡建设厅网站,企业推广网络营销,湖南建设人才网官网useCallback 概述
1、useCallback 是在React 中多次渲染缓存函数的 Hook#xff0c;返回一个函数的 memoized的值#xff1b; 2、如果多次传入的依赖项不变#xff0c;那么多次定义的时候#xff0c;返回的值是相同的,防止频繁触发更新#xff1b; 3、多应用在 父组件为函…useCallback 概述
1、useCallback 是在React 中多次渲染缓存函数的 Hook返回一个函数的 memoized的值 2、如果多次传入的依赖项不变那么多次定义的时候返回的值是相同的,防止频繁触发更新 3、多应用在 父组件为函数式组件子组件也为函数式组件并且子组件被 React.memo() 包裹着 4、主要用于性能优化即使不适用useCallback代码也要能正常运行
useCallback 基本用法
写法
let memoizedCallback useCallback(fn, dependencies)第一个参数fn 是想要缓存的函数可以接收任何参数并返回任何值React 中会在初始化时候调用而不是渲染时候调用 当执行下一次渲染时候如何出入的依赖值 dependencies 相同则会返回相同的函数 memoizedCallback 相反 若依赖值 dependencies 不同则会返回新的函数 memoizedCallback但是 React 不会主动去调用 memoizedCallback函数需要开发者自己决定什么时候执行调用函数
第二个参数 dependencies是否要更新 fn 的所有响应式值的一个列表可以传入空数组:[] 响应式值包括 props、state和所有在你组件内部直接声明的变量和函数。
useCallback 示例
1、为什么要使用 useCallback
当我们传入相同值的时候不管是对象类型还是基本类型都不希望子组件进行更新渲染 在不需要大量渲染的时候性能还可以但是当数据量大的时候若相同的数据也触发子组件渲染则会出现性能问题
2、在不使用 useCallback() 的时候
每次触发 handleAdd 事件时候都会渲染子组件 ChildA
// 父组件
import { useCallback, useState} from react
import ChildA from ./childA
export default function MyCallBack() {const [useInfo, setUseInfo] useState({name: Andy,age: 18})const myCallback () {console.log(useCallback)return useInfo.name}const handleAdd () {setUseInfo({name: Andy,age: 18})}return (divh3This is a MyCallBack demo .---{count}/h3button onClick{handleAdd}add/buttonhr /ChildA onAddCount{myCallback} /ChildA/div)
}
// 子组件
import React, { memo } from reactconst ChildA memo(({onAddCount}) {console.log(ChildA 组件更新了, count)return (divh3This is a ChildA demo ./h3button onClick{onAddCount}子组件/buttonhr //div)
})当我们点击 add 按钮时候发现页面打印 “ChildA 组件更新了”说明传入相同的数据时候会触发子组件渲染如图所示 3、使用 useCallback 时候
import { useCallback,useState} from react
import ChildA from ./childA
export default function MyCallBack() {console.log(父组件callback)const [count, setCount] useState(0)const [useInfo, setUseInfo] useState({name: Andy,age: 18})const myCallback useCallback(() {console.log(useCallback)return useInfo.name}, [useInfo.name])const handleAdd () {setUseInfo({name: Andy,age: 18})}return (divh3This is a MyCallBack demo .---{count}/h3button onClick{handleAdd}add/buttonhr /ChildA onAddCount{myCallback} /ChildA/div)
}
// 子组件
import { memo } from react
// eslint-disable-next-line react/display-name
const ChildA memo(({useInfo, count, onAddCount}) {console.log(ChildA 组件更新了, count)const handleChangeName () {setName(Tom)}return (divh3This is a ChildA demo ./h3h4{count}/h4h4姓名{useInfo?.name || --}/h4h4年龄{useInfo?.age || --}/h4button onClick{onAddCount}子组件/buttonhr //div)
})
export default ChildA 在点击 add 按钮 更新相同数据时候只有父组件渲染子组件不会再渲染如图
总结
若要实现 传入相同数据时候只更新当前组件而子组件不进行渲染需使用 useCallback() 和 memo 来处理
