React：如何阻止render重復渲染相同的數據

前言

記錄react學習遇到的問題

React.PureComponent

react官方說明

    import React { PureComponent } from 'react'
    class Demo extends PureComponent{
        render() {
            console.log(“是否重復渲染？”)
            return (
                { this.props.cont }
            )
        }
    }

如果賦予 React 組件相同的 props 和 state，render() 函數會渲染相同的內容，那么在某些情況下使用 React.PureComponent 可提高性能。

React.memo

react官方說明

    import React { memo } from 'react'
    const memoDemo = memo(props => {
      return <div>my memoized component</div>
    })

兩者區別

React.PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。

注意：React.PureComponent和React.memo()默認僅用作對象的淺層比較

React.memo 深層比較

    const areEqual = (prevProps,nextProps) => {
        let _prev = JSON.stringify(prevProps)
        let _next = JSON.stringify(nextProps)
        return _prev === _next
    }
    const memoDemo = React.memo((props) => {
        console.log('是否重復渲染')
        return (
            <div>測試重復渲染</div>
        )
    },areEqual)