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)