关于react.js:React性能优化之memouseMemouseCallback的使用与区别

因为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用来缓存函数，以后组件被从新执行的时候如果依赖的数据没有发生变化就不会再从新的调用