Как React захватывает реквизит с помощью `const props = this.props`

Question

Я прочитал статью , написанную Дэном. В приведенном ниже примере

class ProfilePage extends React.Component {
  showMessage = (user) => {
    alert('Followed ' + user);
  };

  handleClick = () => {
    const props = this.props;
    setTimeout(() => this.showMessage(props.user), 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

Почему props не изменяется при изменении this.props, так как оба указывают на одну и ту же ссылку?

Answer 1

props объект является неизменным, this.props ссылка может изменяться со временем в случае получения новых реквизитов.

Это должно быть:

  handleClick = () => {
    setTimeout(() => {
      const { props } = this;
      this.showMessage(props.user);
    }, 3000);
  };

Кроме того, следует отслеживать таймаутыотменяется при размонтировании компонента во избежание утечек и исключений.