React性能优化之memo,useMemo,useCallback的使用与区别

Posted 2021-09-07 幸福是奋斗出来的

由于react的state状态发生变化，子组件也会重新执行render，所以为了避免不必要的性能浪费，只能我们自己去做优化了，在类组件中，我们会使用PureComponent,每次会对props进行一次浅比较，当然我们也可以在shouldComponentUpdate，去做更深层次的比对
在函数式组件中，react提供了React.memo,和hooks useMemo(),也可以封装一个HOC,在内部实现PureComponent + shouldComponentUpdate(下篇会写源码)
一、React.memo()

import React, {memo} from \'react\';
    const isEqual =(prev,next)=> {
        console.log(prev,next)
        if(prev.step !== next.step) {
            return false;
        }
        return true;
    }
    const Demo1 = (props)=>{
        console.log(\'demo1----render\');
        const {step} = props;
        return (
            <div>
                <div>
                    <div>demo1</div>
                    <div>step: {step}</div> 
                </div>
            </div>
        )  
    }

通过对2次的props进行比较，如果第二个参数不传递，则默认进行浅比较

二、useMemo()
有时候我们只需要对组件中的某一块进行优化，当count发生变化时useMemo会重新执行

 import React, {useMemo} from \'react\';

    const Demo2 = (props)=>{
    
        const {count} = props;   
        const countCom = useMemo(()=>  <div>count: {count}</div>, [count]);

        return(
            <div>
                <div className="content">
                    <div>demo2</div>
                {countCom}
                </div>
            </div>
        )
    }

三、useCallback()

const Demo3 = ()=>{
    const [list ,setList] = useState([]);

    useEffect(()=> {
        setList([1,2,3]);
    },[])

    const addNum = useCallback(()=> {
        let t = list.map(r=> r+2);
        setList([...t]);
    }, [list]) 

    return(
        <div>
            <div className="content">
                <div>demo2</div>
               <div onClick={addNum}>{list}</div>
            </div>
        </div>
    )
}

useMemo和useCallback的区别：
useMemo用来返回的是缓存结果，useCallback用来缓存函数，当前组件被重新执行的时候如果依赖的数据没有发生变化就不会再重新的调用