面试题：React useEffect钩子的性能优化与场景分析

Question

假设你正在开发一个数据展示页面，该页面从API获取大量数据并渲染。在这个场景下，如何合理使用useEffect钩子来优化性能？比如如何处理数据的获取、更新以及避免不必要的渲染。请结合具体代码示例说明。如果在这个页面中有多个useEffect钩子相互关联，你会如何确保它们之间的执行顺序和数据一致性？

Answer 1

1. 使用 useEffect 优化数据获取、更新及避免不必要渲染

首先，安装 axios 用于模拟从 API 获取数据（假设使用 axios）：

npm install axios

以下是使用 useEffect 进行数据获取的示例代码：

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

const DataDisplayPage = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            try {
                const response = await axios.get('YOUR_API_URL');
                setData(response.data);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {!loading &&!error && (
                <ul>
                    {data.map(item => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default DataDisplayPage;

在上述代码中：

• useEffect(() => { /*... */ }, [])：第二个参数是一个空数组，这意味着这个 useEffect 只会在组件挂载时执行一次，从而避免了不必要的重复渲染。它用于在组件首次渲染后获取数据。
• setLoading 和 setError 分别用于处理加载状态和错误状态，使得页面在数据获取过程中能给出合适的反馈。

2. 处理多个 useEffect 钩子相互关联时的执行顺序和数据一致性

假设我们有一个场景，在获取数据后，我们需要根据获取的数据进行一些额外的计算或副作用操作。

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

const DataDisplayPage = () => {
    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            try {
                const response = await axios.get('YOUR_API_URL');
                setData(response.data);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    useEffect(() => {
        // 这里根据获取的数据进行过滤操作
        const newFilteredData = data.filter(item => item.value > 10);
        setFilteredData(newFilteredData);
    }, [data]);

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>Error: {error.message}</p>}
            {!loading &&!error && (
                <ul>
                    {filteredData.map(item => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default DataDisplayPage;

在这个示例中：

• 第一个 useEffect 负责数据获取，仅在组件挂载时执行。
• 第二个 useEffect 依赖于 data 状态。当 data 发生变化（即数据获取成功并更新了 data），这个 useEffect 会执行。这样就确保了数据获取和后续处理的顺序，并且保证了数据一致性。

总结来说，合理设置 useEffect 的依赖数组，能够控制其执行时机，从而保证多个 useEffect 钩子间的执行顺序和数据一致性。同时，通过正确的依赖管理，可以避免不必要的渲染，优化性能。