面试题：React组件复用之状态管理

Question

在创建可复用的React组件时，假设我们有一个用于用户登录的组件，在不同页面复用，它需要管理登录状态（如loading、登录成功与否等），你会选择哪种状态管理方式（如useState、useReducer等），并简要说明理由，同时给出简单的代码示例。

Answer 1

选择 useReducer

理由：useReducer适用于状态逻辑较为复杂，存在多个子状态相互依赖且有不同状态转换规则的场景。对于用户登录组件，其状态不仅有loading，还有登录成功与否等，使用useReducer可以将状态更新逻辑集中管理，代码结构更清晰，便于维护。

代码示例

import React, { useReducer } from 'react';

// 定义reducer函数
const loginReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN_REQUEST':
      return { ...state, loading: true, loggedIn: false };
    case 'LOGIN_SUCCESS':
      return { ...state, loading: false, loggedIn: true };
    case 'LOGIN_FAILURE':
      return { ...state, loading: false, loggedIn: false };
    default:
      return state;
  }
};

const LoginComponent = () => {
  const initialState = { loading: false, loggedIn: false };
  const [state, dispatch] = useReducer(loginReducer, initialState);

  const handleLogin = () => {
    dispatch({ type: 'LOGIN_REQUEST' });
    // 模拟异步登录请求
    setTimeout(() => {
      // 假设登录成功
      dispatch({ type: 'LOGIN_SUCCESS' });
    }, 2000);
  };

  return (
    <div>
      <h2>用户登录</h2>
      {state.loading && <p>加载中...</p>}
      {!state.loading && state.loggedIn && <p>登录成功</p>}
      {!state.loading && !state.loggedIn && <button onClick={handleLogin}>登录</button>}
    </div>
  );
};

export default LoginComponent;