useMemo的用法

90 阅读1分钟

useMemo是React中的一个Hook,用于缓存计算结果,避免在组件重新渲染时重复执行不必要的计算。 它可以帮助优化性能,尤其是在处理复杂计算或依赖外部数据时。 1.从react中引入useMemo: import React,{ useMemo } from 'react' 2.使用useMemo接收两个参数: 。第一个参数是一个函数,用于计算需要缓存的值 。第二个参数是一个依赖数组,当数组中的值发生变化时,才会重新计算缓存的值。 const memoizedValue = useMemo(( ) =>computeExpensiveValue(a,b),[a,b]);

。computedExpensiveValue是一个计算复杂值的函数。 。a和b是依赖值,当它们发生变化时,useMemo会重新计算缓存的值。 。如果依赖数组中的值没有变化,useMemo会直接返回上一次缓存的结果,避免重复计算

1.复杂计算函数: 。computeExpensiveValue是一个模拟的复杂计算函数,每次调用时会输出“计算复杂性”。 2.使用useMemo: 。useMemo缓存了computeExpensiveValue(a,b)的结果。 。当a或b发生变化时,useMemo会重新计算缓存的值。 。如果a和b没有变化,即使组件重新渲染(如点击“增加计数器”按钮),useMemo也不会重新计算,直接返回缓存的结果。