SOURCE

/*
useMemo 是什么
① React Hook：useMemo(fn, deps) 返回fn 的“记忆化”结果。
② 作用：当依赖 deps 未变化时，跳过重新计算，直接复用上次结果。
③ 核心价值：优化性能与引用稳定，避免不必要的计算与渲染
const a = useMemo(函数,[])
作用：
1.缓存昂贵的计算
2.缓存属性数据

保持引用稳定以配合浅比较
作为子组件 props 传递复杂对象/数组时，避免每次 render 都创建新引用导致子组件重渲染。
配合React.memo 或 useEffect/useCallback 的依赖对比

*/

import {useState,memo,useMemo} from "react"

//父组件中X或者Y的修改会触发父组件重渲染，继而引起子组件的渲染，解决办法用React.memo缓存
const Child= memo(()=>{
 return  <div>我是子组件</div>
})


export function MyApp() {
    const [x,setX] = useState(0)
    const [y,setY] =useState(0)
    //这里有个耗时的计算,X或者Y的修改都会引起组件的渲染，重新计算a的值，解决办法：用useMemo缓存
    let a = useMemo(()=>{
        let a=0
        for(let i=0;i<100000;i++) {
            a+=i
        }
        return a
    },[])
    //arr的值不变，arr传给了子组件，父组件每次渲染都会创建一个新的arr，导致Child也会重新渲染，解决办法用useMemo缓存
    const arr=useMemo(()=>{['q','w','e']},[])
   
    return (
        <div>
        <h1>X值：{x}</h1>
        <h1>y值：{y}</h1>
        <h1>a值：{a}</h1>
        <button onClick={()=>setX(x+1)}>点击x</button>
        <button onClick={()=>setY(y+1)}>点击Y</button>
        <Child arr={arr}/>
        </div>
    )
}