React如何知道组件是从DOM中删除的？

Question

在React的官方Facebook文档中将类生命周期方法添加到类中,它提到:

5)如果从DOM中删除了Clock组件,React会调用componentWillUnmount()生命周期钩子,以便停止计时器.

只是想了解如何？我知道React知道什么时候将组件插入DOM,所以它可以调用componentDidMount生命周期钩子.

但componentWillUnmount它只是说," 曾经从去除DOM ".似乎表明它是真正的DOM而不是React DOM.也许可以用javaScript/jQuery删除组件,并且componentWillUnmount应该触发.

React究竟知道该组件已从真正的DOM中删除了吗？可能有一个观察者？

谢谢

Answer 1

实际DOM上没有观察者.每次调用组件的render函数时,都会重新构建Virtual DOM.如果不再需要某个组件,则会从虚拟DOM中删除该组件.

差异算法将实际DOM中需要更改的实际DOM的那些部分标识为虚拟DOM的反映:某些组件必须添加到实际DOM(=称为安装),其他组件必须被删除(=卸载).整个过程称为对帐.

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

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

Answer 2

这不是真的。如果您确实从 DOM 中手动删除了一个组件，它不会触发componentWillUnmount.. 它仅通过虚拟 DOM 发生，如果组件不再存在，则级别：

// Unmount children that are no longer present.
for (name in prevChildren) {
  if (
    prevChildren.hasOwnProperty(name) &&
    !(nextChildren && nextChildren.hasOwnProperty(name))
  ) {
    prevChild = prevChildren[name];
    removedNodes[name] = ReactReconciler.getHostNode(prevChild);
    ReactReconciler.unmountComponent(
      prevChild,
      false /* safely */,
      false /* skipLifecycle */,
    );
  }
}

https://github.com/facebook/react/blob/5c6a496d98b80d19d851c2ec3a56d760b7118a50/src/renderers/shared/stack/reconciler/ReactChildReconciler.js

unmountComponent然后将调用componentWillUnmount.

我componentWillUnmount通过打开 devtools 并删除一些具有componentWillUnmount生命周期方法的组件来手动测试。