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

為什么this.props更改時props不會更改，因為它們都指向同一個引用？

Answer 1

props對象是不可變的，如果接收到新的props， this.props引用可能會隨着時間而變化。

它應該是：

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

另外，應跟蹤超時以在組件卸載時取消該超時，以防止泄漏和異常。