Почему не происходит ререндера при обновлении стейта в классовом компоненте? Простой таймер

Question

Почему не происходит ререндера Timer при обновлении стейта в классовом компоненте?

Компонент App

class App extends Component {
  constructor(props) {
    super(props);
    this.increment = this.increment.bind(this);
    this.state = {
      counter: 0,
      isCounting: false,
    };
  }

  increment() {
    setInterval(() => this.setState({ counter: this.state.counter + 1 }), 2000);
  }

  render() {
    return (
      <div className={styles.page}>
        <Timer counter={this.state.counter} />
        <ButtonsContainer startBtn={this.increment} />
      </div>
    );
  }
}

export default App;

Компонент Timer

class Timer extends Component {
  constructor(props) {
    super(props);
    this.counter = props.counter;
  }

  render() {
    return <span>{this.counter}</span>;
  }
}

export { Timer };

При клике кнопку Старт функция выполняется. В React Dev Tools пропсы у Timer меняются...но перерендера не происходит почему?

Answer 1

Ре-рендер происходит, новые пропс приходят в компонент, но this.counter не обновляется. В компоненте Timer this.counter это лишнее, Timer получает значение счётчика из this.props.counter. Получается примерно так:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.increment = this.increment.bind(this);
    this.state = {
      counter: 0,
      isCounting: false,
    };
  }

  increment() {
    setInterval(() => this.setState({ counter: this.state.counter + 1 }), 1000);
  }

  render() {
    return (
      <div className={"styles.page"}>
        <Timer counter={this.state.counter} />
        <button onClick={this.increment}>Click</button>
      </div>
    );
  }
}


class Timer extends React.Component {
  render() {
    return <span>{this.props.counter}</span>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Что бы увидеть проблему можно Timer написать примерно так:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.counter = props.counter;
  }

  render() {
    console.log("render", this.props.counter, this.counter);
    return <span>{this.counter}</span>;
  }
}

БЛОГ НА HUSL

Почему не происходит ререндера при обновлении стейта в классовом компоненте? Простой таймер

Ответы (1 шт):