useMemo

useMemo是针对一个函数,是否多次执行
useMemo主要用来解决使用React hooks产生的无用渲染的性能问题
在方法函数,由于不能使用shouldComponentUpdate处理性能问题,react hooks新增了useMemo

useMemo使用
如果useMemo(fn, arr)第二个参数匹配,并且其值发生改变,才会多次执行执行,否则只执行一次,如果为空数组[],fn只执行一次

举例说明:

第一次进来时,控制台显示rich child,当无限点击按钮时,控制台不会打印rich child。但是当改变props.name为props.isChild时,每点击一次按钮,控制台就会打印一次rich child

export default () => {
	let [isChild, setChild] = useState(false);

	return (
		
); } let Child = (props) => { let getRichChild = () => { console.log('rich child'); return 'rich child'; } let richChild = useMemo(() => { //执行相应的函数 return getRichChild(); }, [props.name]); return (
isChild: {props.isChild ? 'true' : 'false'}
{richChild}
); }

 

你可能感兴趣的:(useMemo)