我是否需要在componentWillUnmount中的React組件上取消綁定所有事件偵聽器

Question

我正在使用一個React應用程序，其中我在不同路線上的組件很少。 我正在使用onClick={this.handleClick}模式綁定事件

<>
<ParentComp>
    <button onClick={this.handleClick}></button>
</ParentComp>
</>

現在，我的問題是，當我導航到另一條路線時，或者甚至只是出於某種原因而將組件卸下時，是否需要擔心從上述按鈕中刪除處理程序？ 如果是的話，我將如何在componentWillUnmount方法中執行此操作，因為我將沒有對此按鈕的引用？

編輯事件處理程序未調用任何setTimeout或setInterval或此類的東西。

Answer 1

不可以。使用語法react可以在需要時添加和刪除偵聽器。 當您自己添加addEventListener時，您應該擔心刪除處理程序。

Answer 2

不，React負責事件處理。 還要注意，React DOM負責處理DOM渲染。 每次呈現組件時，您的<button /> JSX都不會創建一個button元素。 它在React Virtual樹中定義一個button節點，然后與真實DOM同步。

因此，React不會直接在節點中設置事件處理程序，例如，如果您使用調試器檢查<button>元素，您將看不到附加的onClick偵聽器！ 這是怎么回事？ 本文對此進行了說明： https : //medium.com/the-guild/getting-to-know-react-doms-event-handling-system-inside-out-378c44d2a5d0

TL; DR：React在頁面的根部使用全局事件處理程序，然后負責分派事件，因此即使您獲得button ref然后使用removeEventListener也不會起作用。

如果您使用另一個直接使用DOM的非反應庫，則只需要擔心清除事件偵聽器。 但在那種情況下，當從DOM中刪除節點時，瀏覽器也會垃圾收集偵聽器。