react.memo

React.memo 和 JS 的 memorize 函数的区别

---

https://dmitripavlutin.com/use-react-memo-wisely/ 

使用 React.memo 进行组件记忆

React.memo是一个高阶组件。它很像 PureComponent，但 PureComponent 属于 Component 的类实现，而“memo”则用于创建函数组件。

这里与纯组件类似，如果输入props相同则跳过组件渲染，从而提升组件性能。

它会记忆上次某个输入 prop 的执行输出并提升应用性能。即使在这些组件中比较也是浅层的。

function MyComponent(props) {

  /* 使用 props 渲染 */

}

function areEqual(prevProps, nextProps) {

  /*

  如果把 nextProps 传入 render 方法的返回结果与

  将 prevProps 传入 render 方法的返回结果一致则返回 true，

  否则返回 false

  */

}

export default React.memo(MyComponent, areEqual);

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。这与shouldComponentUpdate方法的返回值相反。

你还可以为这个组件传递自定义比较逻辑。

用户可以用自定义逻辑深度对比（deep comparison）对象。如果比较函数返回 false 则重新渲染组件，否则就不会重新渲染。

function CustomisedComponent(props) {

    return (

        <div>

            <b>User name: {props.name}</b>

            <b>User age: {props.age}</b>

            <b>User designation: {props.designation}</b>

        </div>

    )

}

// The component below is the optimised version for the Default Componenent

// The Component will not re-render if same props value for "name" property

var memoComponent = React.memo(CustomisedComponent);

上面的组件将对前后两个 props 的值进行浅层比较。

如果我们将对象引用作为 props 传递给 memo 组件，则需要一些自定义登录以进行比较。在这种情况下，我们可以将比较函数作为第二个参数传递给 React.memo 函数。

假设 props 值（user）是一个对象引用，包含特定用户的 name、age 和 designation。

这种情况下需要进行深入比较。我们可以创建一个自定义函数，查找前后两个 props 值的 name、age 和 designation 的值，如果它们不相同则返回 false。

这样，即使我们将参考数据作为 memo 组件的输入，组件也不会重新渲染。

// The following function takes "user" Object as input parameter in props

function CustomisedComponent(props) {

    return (

        <div>

            <b>User name: {props.user.name}</b>

            <b>User age: {props.user.age}</b>

            <b>User designation: {props.user.designation}</b>

        </div>

    )

}

function userComparator(previosProps, nextProps) {

    if(previosProps.user.name == nextProps.user.name ||

      previosProps.user.age == nextProps.user.age ||

      previosProps.user.designation == nextProps.user.designation) {

        return false

    } else {

        return true;

    }

}

var memoComponent = React.memo(CustomisedComponent, userComparator);