React 性能优化

React.Memo

如果你的函数组件在给定相同props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
ps:React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染

import React, { Component } from "react";
import Child from "./Child";
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        time: new Date(),
      });
    }, 1000);
  }
  render() {
    console.log("render");
    return (
        <div>
            <Child value={1}></Child>
            <div>{this.state.time.toString()}</div>
        </div>
    )
  }
}

--------------------------------------------------------
import React, { useState } from "react";
const Child = ({ value }) => {
  console.log("Child:render");
  return <div>time:{value}</div>;
};
export default React.memo(Child);
使用React.memo防止多次被渲染

React.PureComponent

当页面总是setstate一个重复的值的时候，继承自component会重复渲染这一个值，但我们并不想这么做
所以可以使用React.PureComponent阻止重复渲染

import React from "react";
import Child from "./Child";
class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        time: 1,
      });
    }, 1000);
  }
  render() {
    console.log("render");
    return (
      <div>
        <Child value={1}></Child>
        <div>{this.state.time.toString()}</div>
      </div>
    );
  }
}

export default Demo;