面试题：React生命周期与API管理的优化策略

使用旧版生命周期函数可能出现的影响用户体验问题

多次重复渲染：在 componentWillMount 中发起 API 调用，当组件状态或属性更新时，该 API 调用可能会不必要地再次触发，导致多余的网络请求和组件重复渲染，影响性能。
数据不一致：componentWillReceiveProps 中如果没有正确处理新老 props，可能会导致在新 props 到来时，没有及时更新状态，使得组件显示的数据与实际数据不一致。
内存泄漏：在 componentWillUpdate 中发起异步操作，如果在组件卸载前没有取消这些操作，可能会导致内存泄漏，特别是在频繁调用 API 的场景下，这会逐渐消耗系统资源，降低应用的响应速度。

使用新版生命周期函数优化思路

getDerivedStateFromProps：此函数用于在组件接收到新 props 时更新状态。它是一个静态函数，这意味着它不能访问 this。通过它，可以根据新 props 来决定是否需要更新状态，从而避免不必要的状态更新和渲染。
useEffect：这是 React Hook 中的副作用钩子，可用于替代旧版生命周期中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。在 useEffect 中可以进行 API 调用等副作用操作，并且通过设置依赖数组，可以控制副作用的触发时机，避免不必要的重复调用。

代码实现示例

以下是一个简单的 React 组件示例，展示如何使用新版生命周期函数优化 API 调用：

import React, { useState, useEffect } from'react';

function ApiCallComponent({ userId }) {
    const [userData, setUserData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`https://example.com/api/users/${userId}`);
                const data = await response.json();
                setUserData(data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        if (userId) {
            fetchData();
        }

        // 模拟清理操作，类似于 componentWillUnmount
        return () => {
            // 取消未完成的 API 调用（如果有）
        };
    }, [userId]);

    return (
        <div>
            {userData? (
                <div>
                    <p>Name: {userData.name}</p>
                    <p>Email: {userData.email}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

export default ApiCallComponent;

在上述代码中：

useEffect 替代了 componentDidMount 和 componentDidUpdate 的功能。依赖数组 [userId] 确保只有当 userId 变化时才会重新触发 API 调用。
函数内部的 fetchData 异步函数负责实际的 API 调用，并在成功时更新状态，在失败时进行错误处理。
返回的清理函数可以用于取消未完成的 API 调用，避免内存泄漏，类似于 componentWillUnmount 的功能。

如果要使用 getDerivedStateFromProps，示例如下：

import React, { Component } from'react';

class ApiCallComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userData: null
        };
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.userId!== prevState.userId) {
            return { userId: nextProps.userId, userData: null };
        }
        return null;
    }

    componentDidMount() {
        this.fetchData();
    }

    componentDidUpdate(prevProps) {
        if (prevProps.userId!== this.props.userId) {
            this.fetchData();
        }
    }

    fetchData = async () => {
        try {
            const response = await fetch(`https://example.com/api/users/${this.props.userId}`);
            const data = await response.json();
            this.setState({ userData: data });
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    render() {
        return (
            <div>
                {this.state.userData? (
                    <div>
                        <p>Name: {this.state.userData.name}</p>
                        <p>Email: {this.state.userData.email}</p>
                    </div>
                ) : (
                    <p>Loading...</p>
                )}
            </div>
        );
    }
}

export default ApiCallComponent;

在这个类组件中，getDerivedStateFromProps 根据新的 props 中的 userId 判断是否需要更新状态，避免不必要的更新。componentDidMount 和 componentDidUpdate 负责在合适的时机发起 API 调用。相比之下，函数组件结合 useEffect 的方式更加简洁和直观，并且更容易理解和维护。

星途面试题库

面试题：React生命周期与API管理的优化策略

知识考点

面试题答案

使用旧版生命周期函数可能出现的影响用户体验问题

使用新版生命周期函数优化思路

代码实现示例