React中如何避免isLoading状态变化引发子组件重复渲染？

方案1：用React.memo包裹子组件 #

你的Child是纯组件（无props传入、无内部状态变更），用React.memo包装后，只有当它的props发生变化时才会重新渲染，能直接避免无意义的重复渲染。

修改后的Child组件代码：

import React from 'react';

const Child = () => {
    return (
        <div>
            Child Component
        </div>
    );
};

// 用React.memo包裹组件，阻止无必要渲染
export default React.memo(Child);

方案2：优化父组件的状态选择（可选） #

确保useSelector只订阅必要状态，减少父组件因无关状态变更触发的渲染。你当前已经只选择了isLoading，这一步已经做得很好；如果后续authReducer新增其他状态，可以用reselect库的createSelector创建更精准的选择器：

import { createSelector } from 'reselect';

// 基础选择器：获取authReducer
const selectAuthReducer = state => state.authReducer;
// 派生选择器：仅提取isLoading状态
const selectIsLoading = createSelector(
  [selectAuthReducer],
  authReducer => authReducer.isLoading
);

// 在父组件中使用优化后的选择器
const Parent = () => {
    const { checkAuth } = useActions();
    const isLoading = useSelector(selectIsLoading);
    
    useEffect(() => {
        checkAuth();
    }, []);
    
    if (isLoading) {
        return <Loader />;
    }
    
    return <Child />;
};

补充：避免函数引用变更导致的父组件渲染（可选） #

如果useActions返回的checkAuth每次父组件渲染都会生成新引用，可使用useCallback包裹它，避免父组件因函数引用变化触发渲染（你的场景中checkAuth仅在useEffect空依赖中执行一次，这一步非必须，但后续有其他依赖场景时可参考）：

const checkAuth = useCallback(() => {
  // 原checkAuth逻辑
}, []);

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