useMemo
下面我们通过一个实例，来理解下 useMemo 的用法。
父组件
function App() {
const [name, setName] = useState(‘ 名称 ’)
const [content,setContent] = useState(‘ 内容 ’)
return (
<>
<button onClick={() => setName(new Date().getTime())}>name</button>
<button onClick={() => setContent(new Date().getTime())}>content</button>
<Button name={name}>{content}</Button>
</>
)
}
子组件
function Button({name, children}) {
function changeName(name) {
console.log(’11’)
return name + ‘ 改变 name 的方法 ’
}
const otherName = changeName(name)
return (
<>
<div>{otherName}</div>
<div>{children}</div>
</>
)
}
熟悉 react 的同学可以很显然的看出，当我们点击父组件的按钮的时候，子组件的 name 和 children 都会发生变化。
注意我们打印 console.log 的方法。
不管我们是改变 name 或者 content 的值，我们发现 changeName 的方法都会被调用。是不是意味着 我们本来只想修改 content 的值，但是由于 name 并没有发生变化，所以无需执行对应的 changeName 方法。但是发现他却执行了。这是不是就意味着性能的损耗，做了无用功。
下面我们使用 useMemo 进行优化
优化之后的子组件
function Button({name, children}) {
function changeName(name) {
console.log(’11’)
return name + ‘ 改变 name 的方法 ’
}
const otherName = useMemo(()=>changeName(name),[name])
return (
<>
<div>{otherName}</div>
<div>{children}</div>
</>
)
}
export default Button
这个时候我们点击 改变 content 值的按钮，发现 changeName 并没有被调用。但是点击改变 name 值按钮的时候，changeName 被调用了。所以我们可以使用 useMemo 方法 避免无用方法的调用，当然一般我们 changName 里面可能会使用 useState 来改变 state 的值，那是不是就避免了组件的二次渲染。达到了优化性能的目的