金融网站模板免费下载,沈阳城市建设学院官网网站,光辉国际猎头公司,简历模板word概述
useMemo 是React 中的一个HOOK#xff0c;用于根据依赖在每次渲染时候缓存计算结果#xff1b; 大白话就是#xff0c;只有依赖项发生变化时候#xff0c;才会重新渲染为新计算的值#xff0c;否则就还是取原来的值#xff0c;有点类似 vue 中的 computed 计算属性…概述
useMemo 是React 中的一个HOOK用于根据依赖在每次渲染时候缓存计算结果 大白话就是只有依赖项发生变化时候才会重新渲染为新计算的值否则就还是取原来的值有点类似 vue 中的 computed 计算属性注意与 useEffect 区分
写法
const value useMemo(fnc, [a,b])第一个参数fnc 是一个函数用于根据 依赖项 a、b变化时候触发计算得出新值必须是一个没有任何参数的纯函数可以返回任意类型若 a、b没有变化则React 返回与上次相同的值若 a、b 发生改变则会返回新的值 第二个参数[a、b] 是一个数组函数 fnc中计算所依赖的值这个数组中若不传入具体变量而是传入 空数组[]那么会在组件每次更新时候重新渲染
这种缓存值的方式叫做 记忆化 (memoization), 这也是这个Hook 称为 useMemo 的由来
使用场景
1、当我们在 useMemo 中的代码运行很慢通过使用 useMemo 运行效率得到显著提升 2、将计算结果作为 props 传递给包裹在 memo 中的组件。当计算结果没有改变时你会想跳过重新渲染。记忆化让组件仅在依赖项不同时才重新渲染。 3、你传递的值稍后用作某些 Hook 的依赖项。例如也许另一个 useMemo 计算值依赖它或者 useEffect 依赖这个值。
例如 将计算结果作为 props 传给子组件
// 父组件
import React, {useMemo, useState} from react
import ChildA from ./childA
export default function MyMemo() {const [firstName, setFirstName] useState(Andy)const [lastName, setLastName] useState(Li)const [count, setCount] useState(0)const fullName useMemo(() {console.log(useMemo)return firstName lastName}, [firstName, lastName]) // 第二个参数是数组表示fullName 依赖 firstName 和 lastName 的值只有 firstName 和 lastName 值发生变化fullName 才重新计算const handleChangeName (e, type) {console.log(handleChangeName, e)// [set${type}](e.target.value)// if (type FirstName) {// setFirstName(e.target.value)// } else {// setLastName(e.target.value)// }}const handleChangeFirstName () {console.log(更新第一个名称)setCount(count1)setFirstName(11)}return (divinput typetext value{firstName} onChange{(e) handleChangeName(e, FirstName)} /p点击了{count}次/pbutton onClick{handleChangeFirstName}firstName/buttonbr/input typetext value{lastName} onChange{(e) handleChangeName(e, LastName)} /hr /ChildA fullName{fullName}/ChildA/div)
}// 子组件
import React, {memo, useState} from react
const ChildA memo(({fullName}) {console.log(renderChildAfullName----, fullName)return (divp全称{fullName}/p/div)
})
export default ChildA通过 log日志我们可以发现共计点击了 firstName 按钮 18次只有在初始化和第一次点击时候才会渲染 子组件 因为第一次点击将 firstName 更新为 11之后的点击传入相同的值 11导致 useMemo 返回的 fullName 是相同的故不再进行渲染
而当我们使用 useEffect 时候会每次都更新子组件
注意
1、useMemo 只能作为组件代码性能优化使用如果在不使用 useMemo时代码无法正常运行那么我们需要先排查问题之后再使用 useMemo 2、避免不必要的更新 state 的 EffectReact 中很多的性能是由于其自身的更新链导致的所以我们要避免重复的更新同一个组件 3、尽可能的减少依赖项避免过多的依赖导致代码难以理解难以追踪问题我们可以将依赖项 设置成 state 4、我们应该减少状态的提升多使用state而不是滥用useMemo来处理性能
