React hooks memo

Memo

React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。
目前的理解就是，memo帮我们缓存组件，通过第二个参数的条件判断是否重新渲染

例子

父组件更新， 子组件不使用memo
本次父组件不传递任何属性给子组件， 父组件更新属性，子组件刷新

import React, { useState, memo } from 'react';
import PropTypes from 'prop-types';

const Child = (props) => {
    return (
        <div className="child-container">
            这是子组件，内容固定，父组件更新的时候，我可以不用更新
        </div>
    );
}

Child.defaultProps = {
    val: ""
}

Child.propTypes = {
    val: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

export default Child

父组件更新， 子组件memo不使用第二个参数
应该是默认对比pre和next里的每一项内容
本次父组件不传递任何属性给子组件， 父组件更新属性，子组件不刷新

import React, { useState, memo } from 'react';
import PropTypes from 'prop-types';

const Child = memo((props) => {
    return (
        <div className="child-container">
            这是子组件，内容固定，父组件更新的时候，我可以不用更新
        </div>
    );
})

Child.defaultProps = {
    val: ""
}

Child.propTypes = {
    val: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

export default Child

使用memo第二个参数

对比父组件传递给子组件的所有属性
有变化则更新

const Child = memo((props) => {
    return (
        <div className="child-container">
            这是子组件，内容固定，父组件更新的时候，我可以不用更新
        </div>
    );
}, (pre, next) => {
    const keys = Reflect.ownKeys(next)
    return keys.every(i => pre[i] === next[i])
})

使用memo第二个参数， 对比某一个属性

对比父组件传递给子组件的所有属性
有变化则更新

const Child = memo((props) => {
    return (
        <div className="child-container">
            这是子组件，内容固定，父组件更新的时候，我可以不用更新
        </div>
    );
}, (pre, next) => {
    return pre.val === next.val
})