织梦手机网站教程视频教程,公司建网站几天可以,网站流量少,公司网站哪家做的好memo、 useMemo 和 useCallback
缓存组件, 对组件浅比较 (只有组件的props, (对函数,引用要用useCallback包裹)发生变化 缓存值, 依赖项变化#xff0c;会从新计算。 缓存函数, 依赖项变化,重新生成新函数
useMemo 语法 对返回的值缓存进行优化 const memoizedValue useMem…memo、 useMemo 和 useCallback
缓存组件, 对组件浅比较 (只有组件的props, (对函数,引用要用useCallback包裹)发生变化 缓存值, 依赖项变化会从新计算。 缓存函数, 依赖项变化,重新生成新函数
useMemo 语法 对返回的值缓存进行优化 const memoizedValue useMemo(() computeExpensiveValue(a, b), deps); 传入一个函数进去会返回一个 memoized 值(会记忆的值)需要注意的是函数内必须有返回值 第二个参数会依赖值
类似于computed实时计算
useMemo 优化
我们定义了一个total函数内部使用 1 填充了100次通过 reduce 计算总和经过测试发现点击 Increase按钮后只会执行 total1 不会执行 total2假设total计算量巨大就会造成内存的浪费通过 useMemo 可以帮我们缓存计算值。
function App(){ console.log(Demo1 Parent) let [count,setCount] useState(0) const handleClick (){ setCount(count1) } const total1 (){ console.log(计算求和1) let arr Array.from({ length:100 }).fill(1) return arr.reduce((prev,next)prevnext,0) } // 缓存对象值 const total2 useMemo((){ console.log(计算求和2) let arr Array.from({ length:100 }).fill(1) return arr.reduce((prev,next)prevnext,0) },[count]) return ( div div labelCount{count}/label button onClick{handleClick}Increase/button /div div label总和/label span{total1()}/span span{total2}/span /div /div )
}useCallback 语法 对函数缓存进行优化 useCallback(callback, deps)useCallback 接收 2 个参数第一个为缓存的函数第二个为依赖值 主要用于缓存函数第二次会返回同样的结果。
useCallback 优化
import { memo, useCallback, useState } from reactfunction App() {const [count, setCount] useState(0)const handleClick useCallback(() {console.log(子节点点击...)}, [])return (div classNameAppp欢迎学习React后台课程/ppspanCount: {count}/spanbuttononClick{() {setCount(count 1)}}按钮/button/pChild handleClick{handleClick} //div)
}const Child memo(function Child(props: any) {console.log(child...)return (p我是子节点 button onClick{props.handleClick}按钮/button/p)
})useCallback 和 useMemo 区别 他们都用于缓存useCallback 主要用于缓存函数返回一个 缓存后 函数(防止函数重复创建) 而 useMemo 主要用于缓存值返回一个缓存后的值。(防止值重复计算) memo,防止组件重复创建 (只有组件的props, (对函数,引用要用useCallback包裹)发生变化,组件才会更新.)
