我是否需要在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都不会创建按钮元素。它在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引用，然后又使用了removeEventListener它不会有任何作用。

如果您使用直接使用DOM的另一个非反应库，则只需要担心清除事件侦听器。但是在这种情况下，当从DOM中删除该节点时，浏览器也会垃圾收集侦听器。