react 之 useMemo 、useCallBack、memo 的用法

一、useMemo

概念：useMemo 主要用于性能优化，减少不必要的计算，返回一个 计算结果（一般情况下会是非常耗性能的复杂计算，有点像vue 里的 computed 计算属性）

用法：

const mapResult = useMemo(()=>{
    return (
        Arr.map(item => item*2)
    )
},[Arr])

useMemo接受两个参数
参数1：计算方法
参数2：计算方法所依赖的项
在依赖项 Arr 不变的情况下，这个计算方法就不会执行，如果依赖项发生变化，计算方法就会执行
如果没有依赖项，跟useEffect一样，只会在初始化的时候执行

 二、useCallBack

 概念：useCallBack 也是主要用于性能优化，但是它返回的是一个完整方法（函数体），因为方法或者函数也是对象的一种，在渲染的时候都会重复创建这个函数体（方法）的内存指向，用 useCallBack 包裹就能防止函数体在渲染的时候重复创建

用法：

const mapFunc = useCallBack(() =>{
    return new Array(Arr.length).map(item => item*2)
},[Arr])

useCallBack接受两个参数
参数1：计算方法
参数2：计算方法所依赖的项
在依赖项 Arr 不变的情况下，这个计算方法就不会执行，如果依赖项发生变化，计算方法就会执行
如果没有依赖项，跟useEffect一样，只会在初始化的时候执行

三：memo

在 react 中，父组件渲染会造成子组件也跟着渲染，这样就会造成不必要的性能开销

解决方案：使用 memo 高阶组件，memo 会对比组件当前prop值和之前prop值，如果prop值有变化，则重新渲染，如果prop值没有变化，则不渲染

用法：

const parent = () =>{
    const [til,setTil] = useState('黄大仙')
    const [name,setName] = useState('李二朗')

    // setName 会更新 name 父组件会重新渲染，但是此时子组件Child不会渲染，因为传的props值没变
    const chengeP = () =>{
        setName('李大朗') 
    }
　　// setTil 更新 til ，这个时候就会让Child子组件更新，因为传的值props变化了
    const chengeC = () =>{
        setTil('黄小仙')
    }

    return <div>
              <button onClick={chengeP}>改父组件名</button>
              <button onClick={chengeC}>改子组件名</button>

              <div>{name}</div>
              <Child til={til}/>
      </div>
}


const Child = memo((props) =>{
    return <div>
                我是子组件-{props.til}
          </div>
})