React如何知道组件已从DOM中删除?

每次调用组件的渲染函数时,都会重新构建虚拟DOM。如果不再需要组件,则会将其从虚拟DOM中删除。

reconciliation .

正是由于这一和解进程,人们才作出反应 知道

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

这不是真的。如果您手动从DOM中删除组件,它将不会启动 componentWillUnmount

// 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 然后会打电话 组件将卸载

组件将卸载 通过打开devtools并移除一些 组件将卸载