找出useMemo React钩子的用处,以及如何使用它!
如果你是新手,请先看看我的React钩子介绍。
我有时使用的一个React钩子是useMemo 。
import React, { useMemo } from 'react'
这个钩子是用来创建一个记忆化的值。
这个钩子与useCallback非常相似,不同的是
useCallback返回一个备忘化的回调,而useMemo返回一个备忘化的值,即该函数调用的结果。使用情况也不同。useCallback用于传递给子组件的回调。
有时你必须计算一个值,要么通过复杂的计算,要么通过到达数据库进行昂贵的查询,或者到达网络。
使用这个钩子,这个操作只需要做一次,然后这个值就会被存储在备忘值中,下次你想引用它时,你会更快地得到它。
下面是如何使用它。
const memoizedValue = useMemo(() => expensiveOperation())
确保你把那个空数组作为第二个参数添加到useMemo() ,否则根本就不会发生备忘化。
如果你需要传递参数,你也需要在数组中传递它们。
const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])
如果当你试图访问数值时,其中一个参数发生了变化,当然数值会被计算出来,而不会发生备忘录化。