为何删除DOM元素后componentWillUnmount()未触发？React生命周期疑问

云上老周

2026-5-14

问题原因及解决方案

哦，我一眼就发现问题所在啦！你把componentWillUnmount()生命周期方法写在了**父组件LifeCycle**里，但实际上被从DOM中移除的是子组件PageDescription。

React的生命周期方法是组件专属的：

父组件LifeCycle只有在它自己被整个从DOM中移除时，才会触发自身的componentWillUnmount
而你当前的操作只是让父组件不再渲染PageDescription，父组件本身始终存在于DOM中，所以它的componentWillUnmount根本不会被调用

修复方案

把componentWillUnmount的逻辑移到PageDescription组件里就可以了，修改后的子组件示例：

import React from 'react';
import ReactDOM from 'react-dom';

class PageDescription extends React.Component {
  componentWillUnmount() {
    console.log('inside componentWillUnmount method');
    console.log(ReactDOM.findDOMNode(this));
  }

  render() {
    return (
      <p>这里是PageDescription的内容</p>
    );
  }
}

export default PageDescription;

这样当你点击“Delete paragraph”按钮，PageDescription被移除时，它自己的componentWillUnmount就会触发，你就能看到预期的日志输出啦。