useMemo和useCallback的用法

类似于计算属性，当响应式依赖项变化时，计算新的cache值，如下：const cachedValue = useMemo(calculateValue, dependencies)

import { useMemo } from 'react';

 

function TodoList({ todos, tab }) {

const visibleTodos = useMemo(

() => filterTodos(todos, tab),

[todos, tab]

);

// ...

}

以上visibleTodos 会根据todos, tab 变化重新计算

useMemo – React (docschina.org)

 

useCallback

useCallback用来缓存一个函数，通常和useMemo、memo一块使用，memo用来缓存一个组件，如果子组件的属性没有变化，则不会重新渲染，这是就需要使用useCallback、useMemo缓存该子组件props，达到优化性能的目的

useCallback – React (docschina.org)