React.memo作用：允许组件props没有变化的情况下跳过渲染 react组件的默认渲染机制：只要父组件重新渲

基本使用

作用：允许组件props没有变化的情况下跳过渲染

react组件的默认渲染机制：只要父组件重新渲染，子组件就会重新渲染

    const memoComp = React.momo(function CompA(props) {
        ....
    })
    
    // 经过momo包裹生成的缓存组件只有props发生变化的时候才会重新渲染

举个栗子

    import { momo, useState } from 'react'
    
    const memoSon = momo(function Son(props) {
        console.log('子组件重新渲染')
        return (
            <div>我是子组件</div>
        )
    })
    
    function App() {
        const [count, setCount] = useState(0)
        return (
            <div>
                <Son />
                <button onClikc={setCount(count + 1)}>+{ count }</button>
            </div>
        )
    }

此时，父组件更新重新渲染，子组件不会重新渲染

React.momo - props比较机制

机制：在使用momo缓存组件后，React会对每一个 prop 使用 Object.is 比较新值和老值，返回true表示没有变化

当prop是简单类型

Object.is(3, 3) => false 没有变化

当prop是引用类型

Object.is([], []) => true 有变化，React只关心引用有没有变化