useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。
useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。
useMemo使用：
useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。文章来源：https://www.toymoban.com/news/detail-548985.html
import React, {useState, useMemo} from 'react'
export default function UseMemoTest() {
const [text, setText] = useState('')
const [data, setData] = useState([
{id: 1, name: 'test1111'},
{id: 2, name: 'test222'},
{id: 3, name: 'test334'},
{id: 4, name: 'test444'},
])
const handleChange = (e) => {
setText(e.target.value);
}
const getList = useMemo(() => {
return data.filter(item => {
if(item.name.includes(text)) {
return item
}
});
}, [text]);
return (
<div style={{marginTop: 20}}>
<input type="text" onChange={(e) => handleChange(e)}/>
{
getList.map(item => <div key={item.id}>{item.name}</div>)
}
</div>
)
}
文章来源地址https://www.toymoban.com/news/detail-548985.html
到了这里，关于React中useMemo的简单使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
