React.memo例子

1. React.memo是一个高阶组件，类似于React.PureComponent，不同于React.memo是function组件，React.PureComponent是class组件。

2. 这种方式依然是一种对象的浅比较，有复杂对象时无法render。

3. 在React.memo中可以自定义其比较方法的实现（可选参数）。

//MyComponent.js

import React from "react";

function MyFun(props) {
  return <p>It is {props.name}</p>;
}

function areEqual(prevProps, nextProps) {
  console.log(prevProps, "prevProps"); //{name: "a"} "prevProps"
  console.log(nextProps, "nextProps"); //{name: "b"} "nextProps"
  return true; //true则不重新渲染， 相反则重新渲染
}

const MyComponent = React.memo(MyFun, areEqual);

export default MyComponent;

import React, { PureComponent, Fragment } from "react";
import MyComponent from "./MyComponent";

class ReactMemo extends PureComponent {
  state = {
    name: "a"
  };

  handleClick = () => {
    this.setState({
      name: "b"
    });
  };

  render() {
    const { name } = this.state;
    return (
      <Fragment>
        <MyComponent name={name} />
        <button onClick={this.handleClick}>click</button>
      </Fragment>
    );
  }
}

export default ReactMemo;