第11章：生命周期方法

1. 简要说明

React组件的生命周期是指组件从创建到销毁的整个过程中的不同阶段。每个阶段都有特定的生命周期方法（Lifecycle Methods），开发者可以通过这些方法在特定的时机执行特定的逻辑，例如初始化、更新数据、清理资源等。理解组件的生命周期和生命周期方法的使用场景，对于编写高效、可靠的React应用非常重要。

2. 关键知识点

2.1 组件生命周期的三个阶段

React组件的生命周期可以分为三个主要阶段：

挂载阶段（Mounting）：当组件第一次被创建并插入到DOM时，会触发生命周期方法。
更新阶段（Updating）：当组件的状态（state）或属性（props）发生变化时，会触发生命周期方法。
卸载阶段（Unmounting）：当组件从DOM中被移除时，会触发生命周期方法。

2.2 常用生命周期方法

以下是React中最常用的生命周期方法：

componentDidMount：在组件挂载完成后立即调用。常用于初始化操作，例如发送网络请求、订阅事件等。
componentDidUpdate：在组件更新完成后调用。常用于响应状态或属性的变化，例如重新计算布局、更新DOM等。
componentWillUnmount：在组件卸载前调用。常用于清理资源，例如取消网络请求、解除事件监听等。

2.3 生命周期方法的使用场景

componentDidMount：
- 初始化组件：例如设置初始状态、订阅外部事件等。
- 发送网络请求：例如从API获取数据并更新组件状态。
componentDidUpdate：
- 响应状态或属性变化：例如当状态变化后需要更新DOM或重新计算某些值。
- 更新依赖：例如当组件收到新的props时，根据新props更新内部状态。
componentWillUnmount：
- 清理资源：例如取消网络请求、清除计时器、解除事件监听等。
- 避免内存泄漏：确保组件在卸载后不会造成资源泄漏。

3. 示例代码

以下是一个简单的示例，展示了生命周期方法的使用场景：

import React, { Component } from 'react';

class LifeCycleComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            timer: null
        };
    }

    componentDidMount() {
        // 发送网络请求获取数据
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                this.setState({ data });
            });

        // 设置计时器
        const timer = setInterval(() => {
            console.log('计时器在运行');
        }, 1000);
        this.setState({ timer });
    }

    componentDidUpdate(prevProps, prevState) {
        // 检查props是否变化
        if (this.props.filter !== prevProps.filter) {
            // 根据新的filter props更新数据
            this.setState({ filteredData: this.state.data.filter(item => item.value === this.props.filter) });
        }
    }

    componentWillUnmount() {
        // 清除计时器
        if (this.state.timer) {
            clearInterval(this.state.timer);
            this.setState({ timer: null });
        }
        // 解除其他资源
    }

    render() {
        return (
            <div>
                {this.state.data ? (
                    <div>
                        <h2>数据已加载</h2>
                        <pre>{JSON.stringify(this.state.data, null, 2)}</pre>
                    </div>
                ) : (
                    <div>加载中...</div>
                )}
            </div>
        );
    }
}

export default LifeCycleComponent;

4. 总结

理解React组件的生命周期和生命周期方法的使用场景，可以帮助开发者更好地管理组件的行为和状态。通过合理使用这些方法，可以提高应用的性能和用户体验，避免常见的问题，例如内存泄漏或不必要的重新渲染。

5. 练习

问题解答：
- 什么情况下会调用componentDidMount？它有什么常见用途？
- componentDidUpdate与componentWillReceiveProps有什么不同？
- 为什么在componentWillUnmount中清理资源很重要？
方法实现：
- 创建一个组件，包含以下生命周期方法：componentDidMount, componentDidUpdate, componentWillUnmount。
- 在componentDidMount中模拟数据加载，并记录日志。
- 在componentDidUpdate中处理props变化，并记录日志。
- 在componentWillUnmount中清理资源，并记录日志。
组件开发：
- 创建一个计时器组件，使用componentDidMount启动计时器，使用componentWillUnmount停止计时器。
- 创建一个数据展示组件，使用componentDidMount从API获取数据，并在componentDidUpdate中处理props变化以更新展示内容。

第11章：生命周期方法​

1. 简要说明​

2. 关键知识点​

2.1 组件生命周期的三个阶段​

2.2 常用生命周期方法​

2.3 生命周期方法的使用场景​

3. 示例代码​

4. 总结​

5. 练习​