面试题：React 复杂应用架构下 useEffect 数据获取与状态管理的协同优化

设计方案

集中化数据获取逻辑：将数据获取逻辑从各个组件中提取出来，放到一个单独的服务层（如 apiService）。这样做可以减少代码冗余，方便统一管理和维护。同时，利用 redux-thunk 或 redux-saga 等中间件来处理异步操作。
管理数据依赖关系：
- 顺序获取：对于存在依赖关系的数据，确保先获取依赖数据，再根据依赖数据获取其他数据。例如，在 apiService 中编写获取 A 数据的函数 fetchA，获取 B 数据的函数 fetchB，在 fetchB 中依赖 fetchA 的结果。
- 缓存数据：使用 Redux 状态来缓存已经获取的数据。当下游组件需要依赖数据时，先从 Redux 状态中检查是否已经存在，避免重复获取。
优化 useEffect 使用：
- 减少不必要的依赖：仔细确认 useEffect 的依赖数组，只传入真正影响数据获取逻辑的变量。如果某个变量在数据获取过程中不会改变其逻辑，就不应该放入依赖数组，防止不必要的重复渲染和数据获取。
- 防抖和节流：对于频繁触发数据获取的场景，例如在输入框输入时触发搜索数据获取，可以使用防抖（debounce）或节流（throttle）技术。这可以通过 lodash 等库实现。
协调 Redux 状态交互：
- 数据同步：将获取到的数据及时同步到 Redux 状态树中，确保各个组件都能从状态树中获取最新数据。
- 状态更新策略：在 Redux 中，通过 reducer 函数来处理状态更新。遵循单一数据源原则，确保状态更新的原子性和可预测性。对于复杂的状态更新，可以使用 immer 库简化更新逻辑。

核心代码要点

使用 redux-thunk 进行异步操作：

// store.js
import { createStore, applyMiddleware } from'redux';
import thunk from'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

集中化数据获取逻辑：

// apiService.js
import axios from 'axios';

const baseUrl = 'https://your-api-url.com';

export const fetchA = async () => {
    const response = await axios.get(`${baseUrl}/a`);
    return response.data;
};

export const fetchB = async (paramFromA) => {
    const response = await axios.get(`${baseUrl}/b?param=${paramFromA}`);
    return response.data;
};

在 React 组件中使用 useEffect 和 Redux：

// ComponentA.js
import React, { useEffect } from'react';
import { useDispatch } from'react-redux';
import { fetchA } from '../apiService';
import { setAData } from '../actions';

const ComponentA = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const fetchData = async () => {
            const data = await fetchA();
            dispatch(setAData(data));
        };
        fetchData();
    }, []);

    return (
        <div>Component A</div>
    );
};

export default ComponentA;

// ComponentB.js
import React, { useEffect } from'react';
import { useDispatch, useSelector } from'react-redux';
import { fetchB } from '../apiService';
import { setBData } from '../actions';

const ComponentB = () => {
    const aData = useSelector(state => state.aData);
    const dispatch = useDispatch();

    useEffect(() => {
        if (aData) {
            const fetchData = async () => {
                const data = await fetchB(aData.someParam);
                dispatch(setBData(data));
            };
            fetchData();
        }
    }, [aData]);

    return (
        <div>Component B</div>
    );
};

export default ComponentB;

防抖处理：

import React, { useState } from'react';
import { useDispatch } from'react-redux';
import { debounce } from 'lodash';
import { searchData } from '../apiService';
import { setSearchResults } from '../actions';

const SearchComponent = () => {
    const [inputValue, setInputValue] = useState('');
    const dispatch = useDispatch();

    const handleSearch = debounce(async (value) => {
        const results = await searchData(value);
        dispatch(setSearchResults(results));
    }, 300);

    const handleChange = (e) => {
        const value = e.target.value;
        setInputValue(value);
        handleSearch(value);
    };

    return (
        <input type="text" value={inputValue} onChange={handleChange} />
    );
};

export default SearchComponent;

面试题：React 复杂应用架构下 useEffect 数据获取与状态管理的协同优化

知识考点

面试题答案

设计方案

核心代码要点