# useMemo和React.memo的区别

React日常开发中，有两种方式缓存渲染结果，useMemo和React.memo，看看他们分别适用于什么场景。

# useMemo

useMemo属于React hook，React hook并不是在所有地方都能使用的，它只能在组件顶层或hook内部调用

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo返回一个记忆值，只有当它的依赖项改变时，才重新计算返回值

React.memo则属于HOC（高阶组件），如果你希望你的组件只有在props变化的情况下，才重新渲染，就可以使用React.memo包装你的组件，然后再调用

const MyComponent = React.memo(function MyComponent(props) {
  // 只有props变化，才会重新渲染
});

只看原理和概念，理解是浅薄的，结合一个最简单的例子就非常容易理解了。

初始状态：父组件Parent更新时间戳，子组件Child每次都重新渲染，Demo (opens new window)

用React.memo包装Child组件，再点击更新时间戳，Child不会重新渲染

const ChildHOC = React.memo(Child);

<ChildHOC />

用useMemo处理，注意：此时没有配置依赖项数组

function Child() {
	const renderCount = useRef(0);
	
	return useMemo(() => <div>子组件渲染次数：{renderCount.current++}</div>));
}

会发现，Child还是会重新渲染，因为如果没有提供依赖项数组，useMemo在每次渲染时都会计算新的值

那么给Child组件加上依赖试试看，Demo (opens new window)

此时，只有当Child的props变化，Child才会重新渲染

假如给useMemo配置一个空的依赖项数组，Child也不会重新渲染。

想让组件只在props变化时重新渲染，用React.memo

想让组件只在依赖项变化时重新渲染，用useMemo