React 进阶提高免费视频教程 #5 React.PureComponent

https://www.qiuzhi99.com/movies/you-ren-de-react-shi-pin-jiao-cheng-ji-chu-pian-10-wu-zhuang-tai-zu-jian

import React, { Component, PureComponent } from 'react';
import logo from './logo.svg';
import './App.css';

class Temp extends PureComponent {
  render() {
    console.log('render Temp');
    return (
      <div>{ this.props.val }</div>
    );
  }
}

class App extends Component {
  state = {
    val: 1
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        val: 1
      })
    }, 2000)
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log('nextState', nextState);
  //   console.log('current state', this.state);
  //   return (
  //     this.state.val === nextState.val ? false : true
  //   )
  // }

  render() {
    console.log('render App');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Temp val={ this.state.val } />
      </div>
    );
  }
}

export default App;