深入了解React（十四、生命周期4-销毁组件）

原创

于 2018-04-20 10:43:33 发布 · 1.6w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #销毁组件 #生命周期

本文探讨了React中组件销毁的过程，详细解释了当点击'销毁子组件'按钮后，如何执行componentWillUnmount生命周期方法，实现子组件的卸载与清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class Component extends React.Component {
    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            data: 'Old State'
        };

        alert('constructor');
        console.log('初始化数据---------constructor---------');
    }

    // 组件将要加载
    componentWillMount() {
        alert('componentWillMount');
        console.log('componentWillMount');
    }

    // 组件加载完成
    componentDidMount() {
        alert('componentDidMount');
        console.log('componentDidMount');
    }

    // 将要接收父组件穿来的props
    componentWillReceiveProps() {
        alert('componentWillReceiveProps');
        console.log('componentWillReceiveProps');
    }

    // 子组件是不是应该更新
    shouldComponentUpdate() {
        alert('shouldComponentUpdate');
        console.log('shouldComponentUpdate');
        // true表示要更新，false