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 

It is {props.name}

; } 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 (
      
        
        
      
    );
  }
}

export default ReactMemo;

 

你可能感兴趣的:(React.memo例子)