javascript - React 如何知道组件已从 DOM 中移除？

Question

下Adding Lifecycle Methods to a Class在 React 的官方 Facebook 文档中提到:

5) If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

只是想了解怎么做？我知道 React 知道何时要将组件插入 DOM，因此它可以调用 componentDidMount 生命周期 Hook 。

但是对于 componentWillUnmount 它只是说“ever 从 DOM 中移除”。似乎暗示它是真正的 DOM 而不是 React DOM。还不如使用 javaScript/jQuery 删除组件，componentWillUnmount 应该触发。

React 究竟是如何知道组件已经从真实 DOM 中移除的？会不会有观察者？

谢谢

Answer 1

实际 DOM 上没有观察者。 每次调用组件的渲染函数时，都会重新构建虚拟 DOM。如果不再需要某个组件，则会将其从虚拟 DOM 中删除。

diffing 算法识别实际 DOM 中需要更改的那些部分，以使实际 DOM 成为虚拟 DOM 的反射(reflect):一些组件必须添加到实际 DOM(= 称为安装)，其他组件将必须删除(=卸载)。整个过程称为 reconciliation .

正是由于这个协调过程，React 知道哪些组件要从实际的 DOM 中删除。就在组件被删除之前，React 调用 componentWillUnmount() 生命周期钩子(Hook)。

如果另一个脚本(Javascript 或 jQuery)导致从实际 DOM 中删除某个组件，React 永远不会注意到它，因此不会调用 componentWillUnmount() 生命周期钩子(Hook)。