看了官网和百度的结果也不是很明白,只知道是优化子组件避免重复加载来使用的
具体看代码
父组件
import React, { useState } from 'react';
import Son from './components/Son';
export default (props) => {
const [number, setNumber] = useState(0);
const [name, setName] = useState(0);
return (
<>
<button
onClick={() => {
setNumber(number + 1);
}}
>
{'number is:' + number}
</button>
<button
onClick={() => {
setName(name+1);
}}
>
{'change name'}
</button>
<Son name={name} />
</>
);
};
子组件
import React, { Component, useMemo } from 'react';
export default (props) => {
const showName = (name) => {
console.log('Son render');
return 'my name is ' + name;
};
return (
<>
{/* <div>
{useMemo(() => {
return showName(props.name);
}, [props.name])}
</div> */}
<div>{showName(props.name)}</div>
</>
);
};
此时无论点击number 还是 change name 都会导致子组件Son刷新 触发 showName方法执行,出于优化加载的目的 点击改变number没必要触发子组件内showName执行,只有changeName 的时候执行 showName 方法
Son 使用useMemo
return (
<>
<div>
{useMemo(() => {
return showName(props.name);
}, [props.name])}
</div>
{/* <div>{showName(props.name)}</div> */}
</>
);
useMemo(function,[监听的值])
这样点击改变number就不会触发Son内showName 执行了,只有props.name改变才会触发showName
网友评论