React如何使用const props = this.props捕获道具

Question

I read the article written by Dan. In the example below

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

Why props does not change when this.props changed, since both point to the same reference?

Answer 1

props object is immutable, this.props reference may change with time in case new props are received.

It should be:

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

Also, timeouts should be tracked to be cancelled at component unmount in order to prevent leaks and exceptions.