memo 的使用

memo的作用？

memo用于性能优化， 如果当前组件中的数据没有发生变化，那么memo方法就会阻止本次组件的更新，它的功能类似于pureComponent和shouldComponentUpdate

memo的使用方法

import React, {useState, memo} from "react";

function My_Memo1 (){
    const [count, setCount] = useState(0)

    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <My_Memo2 />
        </div>
    )
}
const My_Memo2 = memo(function My_Memo2 (){
    console.log('My_Memo2')
    return <div>My_Memo2</div>
})
console.log(My_Memo2)


export default My_Memo1;

上述代码，触发setCount改变count的值， 因为count的改变组件重新渲染，但是组件内部的My_Memo2 组件是不需要更新的，因为My_Memo2 组件没有任何的变化，也因为My_Memo2 的不必要的更新会带来一定的性能损耗，所以在这里使用memo去包裹内部的组件， 在组件更新的时候memo会看自身包裹的组件是否有数据更新，如果没有就会阻止自身组件的重新渲染；