剑客useMemo

useMemo同样也是做缓存优化用的,只有所依赖项的改变才会导致重新渲染,否则就拿缓存的值,因此就不用每次渲染的时候再做计算了.

例子:

import { useMemo, useState } from "react";

import "./styles.css";

export default function App() {

const [name,setName] = useState('1');

const Memo1 = useMemo(()=><Memo name={name}/>,[])

return (

<div className="App">

{Memo1}

</div>

);

}
const Memo=(props)=>{
return <>

{ props.name}

</>

}

当我们的第二个参数为空的时候,点击按钮时值依然没有更新:

当我们在第二个参数中使用name之后,再次点击按钮看会发生什么变化:

可以得出只有第二个参数中有依赖项才会重新渲染.

useMemo(参数,参数):

参数1：是一个创建依赖项函数，该函数的返回值就是你想要缓存的数据，但形式上感觉挺像useEffect的，所以我才拿出来做对比，当然实际上两者却存在着很多差异
参数2：这个是个数组，存放着被依赖的项，意思就是说只有当这个数组里面的变量发生了变化，才会调用参数1的函数，这里同样跟useEffect很像，都是依赖项变了，才会调用前面的参数1的函数.

tips: - useMemo会在渲染的时候执行，而不是渲染之后执行，这是和useEffect的本质区别，所以不建议在useMemo里面写副作用相关的逻辑

不要过度依赖useMemo，useMemo本身也有开销，useMemo会记住一些值，然后在后续的render中，将依赖数组中的值取出来和上一次记录的值进行比较，只有不相等的时候才会重新执行回调函数，否则直接返回记住的值

三剑客之=>useMemo

剑客useMemo