目录
- 1,介绍
- 和 useCallback 的区别
- 2,使用举例
- 2.1,优化子组件渲染1
- 2.2,优化子组件渲染2
1,介绍
一句话总结,效果类似 Vue 中的 computed
。常用于性能优化。
和 useCallback 的区别
使用上没有区别,同样如果依赖项没有发生变化,第1个参数不会再次执行。
useMemo
会将第1个参数的返回值缓存起来。useCallback
会将第1个参数的引用值缓存起来。
一般来说,useMemo
用于缓存值。而 useCallback
用户缓存函数。
useMemo
也可以用于缓存函数,只是不常用。
2,使用举例
2.1,优化子组件渲染1
对 上篇文章 的例子来说,可以优化为:
const handleClick = useCallback(() => {setTxt(Math.random());
}, [txt]);// 改造为
const handleClick = useMemo(() => {return () => {setTxt(Math.random());};
}, [txt]);
2.2,优化子组件渲染2
import React, { useState } from "react";function Child(props) {return <li>{props.item}</li>;
}export default function App() {const [range, setRange] = useState({min: 0,max: 10000,});const [n, setN] = useState(0);const list = [];for (let i = range.min; i < range.max; i++) {list.push(<Child item={i} key={i}></Child>);}return (<>{list}<inputtype="number"value={n}onChange={(e) => {setN(e.target.value);}}/></>);
}
可以看到,不做优化前,每次改变状态变量 n
,都会触发子组件渲染。而且子组件的渲染开销很大。
优化父组件:
export default function App() {// ...const list = useMemo(() => {const list = [];for (let i = range.min; i < range.max; i++) {list.push(<Child item={i} key={i}></Child>);}return list;}, [range.min, range.max]);// ...
}
注意和上个文章中例子的区别,那个例子的子组件是类组件,有
PureComponent
来优化组件执行的问题。
对函数组件来说,如果 React 元素本身的引用没有发生变化,同样也不会再次渲染。
以上。