多组件同时触发数据请求的React Hooks简洁解决方案咨询

原组件代码 #

function MyComponent(props) {
    const dispatch = useDispatch(); // Redux dispatch function
    const isLoading = useSelector(selIsLoading); // flag from our Redux app state
    const data = useSelector(selData); // data from our Redux app state

    useEffect(() => {
        if (!data && !isLoading) {
            console.log('Need to fetch!');
            dispatch(actionToFetchStuff());
        }
    }, [data, isLoading]);

    return !data ? <NoData /> : <Data data={data} {...props} />;
}

问题分析 #

当页面同时加载多个MyComponent实例时，所有组件的useEffect会在初始渲染后同步执行。由于闭包特性，每个useEffect捕获的都是isLoading和data的初始值（通常为false和undefined），导致所有组件都会判定需要发起请求。而Redux状态更新是异步的，isLoading无法在短时间内同步到所有组件，因此无法起到阻止重复请求的作用。

基于React Hooks的解决方案 #

方案1：用useRef跟踪本地请求状态 #

利用useRef的current属性不受闭包捕获的特性，在组件实例内部维护请求标记，确保每个组件只发起一次请求：

function MyComponent(props) {
    const dispatch = useDispatch();
    const isLoading = useSelector(selIsLoading);
    const data = useSelector(selData);
    const hasInitiatedRequest = useRef(false); // 本地标记是否已发起请求

    useEffect(() => {
        if (!data && !isLoading && !hasInitiatedRequest.current) {
            hasInitiatedRequest.current = true; // 标记为已发起
            dispatch(actionToFetchStuff());
        }
    }, [data, isLoading, dispatch]);

    return !data ? <NoData /> : <Data data={data} {...props} />;
}

说明：hasInitiatedRequest是组件实例独有的状态，即使全局isLoading更新不及时，也能通过本地标记避免当前组件重复触发请求。

方案2：在Redux Action层做全局请求拦截 #

把请求判断逻辑移到Redux的action creator内部，从全局状态层面拦截重复请求：

// actionCreator.js
export const actionToFetchStuff = () => (dispatch, getState) => {
    const state = getState();
    const isLoading = selIsLoading(state);
    const data = selData(state);

    // 全局状态校验，已有数据或正在加载则直接返回
    if (data || isLoading) return;

    // 发起实际请求流程
    dispatch({ type: 'FETCH_START' });
    fetch('/api/stuff')
        .then(res => res.json())
        .then(payload => dispatch({ type: 'FETCH_SUCCESS', payload }))
        .catch(err => dispatch({ type: 'FETCH_FAILURE', payload: err }));
};

说明：无论多少组件dispatch这个action，只有第一个会触发实际的API请求，后续请求都会被全局状态判断拦截。原组件的useEffect无需修改，逻辑更集中在Redux层。

方案3：封装自定义Hook复用请求逻辑 #

将请求控制逻辑抽离成自定义Hook，简化组件代码同时复用逻辑：

function useFetchData() {
    const dispatch = useDispatch();
    const isLoading = useSelector(selIsLoading);
    const data = useSelector(selData);
    const requested = useRef(false);

    useEffect(() => {
        if (!data && !isLoading && !requested.current) {
            requested.current = true;
            dispatch(actionToFetchStuff());
        }
    }, [data, isLoading, dispatch]);

    return { data, isLoading };
}

// 使用自定义Hook的组件
function MyComponent(props) {
    const { data, isLoading } = useFetchData();
    return !data ? <NoData /> : <Data data={data} {...props} />;
}

说明：这种方式把请求逻辑与组件UI解耦，多个组件需要触发相同请求时，直接复用自定义Hook即可。

内容的提问来源于stack exchange，提问作者digory doo