UI技能进阶：如何解决复杂交互场景下的组件状态管理难题

7次阅读

共计 2233 个字符，预计需要花费 6 分钟才能阅读完成。

最近在重构一个电商后台管理系统时，我遇到了典型的组件通信难题。商品编辑页需要跨 5 层组件传递 initialValues 和onSubmit回调，中间层组件被迫成为 ” 管道工 ”。更糟的是，当新增一个价格校验规则时，需要修改沿途所有组件的 Prop 类型定义——这就是典型的 Prop Drilling 困境。

优势：时间旅行调试、严格的单向数据流
劣势：样板代码多，小型项目性价比低
适用场景：大型应用、需要历史状态回溯

优势：响应式编程、极简代码量
劣势：黑魔法多、类型推导困难
适用场景：快速原型、熟悉响应式编程的团队

优势：React 原生支持、零依赖
劣势：容易触发无效渲染
适用场景：简单主题切换、低频更新的全局状态

选型决策树：

是否需要时间旅行调试？→ Redux
是否追求极致开发速度？→ MobX
是否是简单共享状态？→ Context API
其他情况 → 继续阅读本文方案

// stores/authStore.ts
type AuthState = {
  user: User | null;
  loading: boolean;
};

type AuthAction = 
  | {type: 'LOGIN_START'}
  | {type: 'LOGIN_SUCCESS'; payload: User}
  | {type: 'LOGIN_FAILED'};

const initialState: AuthState = {
  user: null,
  loading: false,
};

function reducer(state: AuthState, action: AuthAction): AuthState {switch (action.type) {
    case 'LOGIN_START':
      return {...state, loading: true};
    case 'LOGIN_SUCCESS':
      return {user: action.payload, loading: false};
    case 'LOGIN_FAILED':
      return {...state, loading: false};
    default:
      return state;
  }
}

memoization：

// hooks/useStore.ts
export const useStore = <T,>(selector: (state: RootState) => T) => {const { state} = useContext(StoreContext);
  const selected = selector(state);

  return useMemo(() => selected, [selected]); // 依赖精确比对
};

批量更新：

// 使用 React 18 的自动批处理
const [state, dispatch] = useReducer(reducer, initialState);
const stableDispatch = useCallback(dispatch, []); // 保持引用稳定

// 封装高阶 reducer
const persistedReducer = (reducer: Reducer, key: string) => {return (state: State, action: Action) => {const newState = reducer(state, action);
    sessionStorage.setItem(key, JSON.stringify(newState));
    return newState;
  };
};

// store 初始化时
if (import.meta.env.DEV) {
  window.__REDUX_DEVTOOLS_EXTENSION__?.connect({
    name: 'Custom Store',
    trace: true,
  });
}

// 测试用例示例
describe('authStore', () => {
  let mockDispatch: jest.Mock;

  beforeEach(() => {mockDispatch = jest.fn();
    jest.spyOn(React, 'useContext').mockReturnValue({dispatch: mockDispatch,});
  });

  it('should handle login', async () => {await loginUser({ email: 'test@test.com'});
    expect(mockDispatch).toHaveBeenCalledWith({type: 'LOGIN_START'});
  });
});