React函数组件优化

主要针对于函数组件，父组件重渲染时，减少子组件不必要的渲染。

性能优化方向

1.减少重新 render 的次数

2.减少计算的量

组件重新渲染的原因

1.组件自己的状态改变

2.父组件重新渲染，导致子组件重新渲染，但是子组件的props 没有改变

3.父组件重新渲染，导致子组件重新渲染，但是子组件的 props 有改变

React.memo - 减少 render

1.基础用法
React.memo 其实就是一个高阶函数，接收一个组件为参数，返回新的组件。
在 props 不变的情况下，新的组件不会进行重渲染，对 props 的值进行浅比较。

function Component(props){
    return (
         <div>{props.name}</div>
    )
}
export default React.memo(Component)

2.高级用法
传入第二个参数 fn(prevProps,nextProps)，控制 React.memo 的对比过程

function Component(props){
    return (
         <div>{props.name}</div>
    )
}
function isEqual(prevProps,nextProps){
    let notRender = arrayIsEqual(prevProps.list,nextProps.list)
    return notRender
    //notRender=true，list 属性相等，返回 true，不进行重渲染
    //arrayIsEqual是一个工具函数，用来比较两个数组是否相等
}
export default React.memo(Component,isEqual)

useCallback - 减少 render

在函数组件中，父组件重新渲染，函数、事件等将重新被创建，导致传递给子组件的 props 改变，引起不必要的 render

function Parent(){
    const hello=(){
        alert("hello")
    }
    return (
        <Child hello={hello}></Child>
    )
}

function Child(props){
    console.log(props)
    return <button onClick={props.hello}>hello</button>
}

function Parent(){
    const hello=(){
        alert("hello")
    }
    //使用 useCallback Hooks，返回回调函数的 memoized 版本，memoHello只有在依赖项有变化的时候才会更新
    const memoHello=useCallback(hello,[])
    return (
        <Child hello={memoHello}></Child>
    )
}

function Child(props){
    console.log(props)
    return <button onClick={props.hello}>hello</button>
}

useMemo - 减少计算

useMemo 做计算结果缓存，在计算函数的依赖项发生变化时，才重新调用函数计算，避免组件重新渲染时反复进行不必要的费时计算

function Child(){
    function expensiveComputedFn(){
        //大量的计算，费时的计算
        return  res
    }
    const memoRes = useMemo(expensiveComputedFn,[])
    return <div>{memoRes}</div>
}