onClick = {onRouteChange（'home'）}和onClick = {（）=> onRouteChange（'home'）}有什么區別？

Question

onClick={onRouteChange('home')}
onClick={ () => onRouteChange('home')}

從我一直在觀看的教程中可以看出，第一個將在渲染時被調用，而第二個將在onClick發生時運行。 我不明白。

Answer 1

必須為事件（如onClick ， onBlur等）分配一個函數（也稱為回調）。 觸發相關事件時將體現該功能。 換句話說，必須為其分配一個函數，該函數包含該事件發生時要執行的代碼。

這意味着：

• onClick={onRouteChange('home')}

  這會將onRouteChange('home')的返回值分配給click事件。 如果該函數返回一個函數，那么一切都很好。 但我想事實並非如此。

  ---

• onClick={() => onRouteChange('home')}

  這將分配一個匿名函數（是() =>部分），該匿名函數在運行時將調用onRouteChange函數。 這可能就是您想要的。

---

因此，如果您的函數類似於：

onRouteChange(path) {
  this.props.history.push(path);
}

然后，您需要最后一個解決方案。

但是，如果更像是：

onRouteChange(path) {
  return () => {
    this.props.history.push(path);
  };
}

那么第一個解決方案就會奏效。