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