面试题：React的useReducer与Redux在复杂状态管理上的差异

原理差异

useReducer：
- 基于React的状态更新机制，它是一个Hook。通过dispatch动作来触发reducer函数，reducer函数根据接收到的action和当前状态计算并返回新的状态。类似于JavaScript的Array.reduce方法，它将当前状态和action作为参数，返回一个新的状态。其作用是将复杂的状态更新逻辑从组件中分离出来，使组件逻辑更清晰。
- 例如：

import React, { useReducer } from'react';

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

Redux：
- 遵循Flux架构模式，有一个单一的store来存储整个应用的状态。任何组件都可以通过dispatch action来触发状态更新，action会经过reducer函数，reducer根据action和当前状态生成新的状态，然后store更新状态，进而通知订阅了该状态变化的组件重新渲染。Redux通过这种方式实现了单向数据流，并且可以通过中间件（如redux - thunk、redux - saga）来处理异步操作等复杂逻辑。
- 例如：

// actions.js
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// reducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

// store.js
import { createStore } from'redux';
const store = createStore(counterReducer);

// component.js
import React from'react';
import { useSelector, useDispatch } from'react-redux';

function Counter() {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => dispatch(increment())}>Increment</button>
            <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
}

使用场景差异

useReducer：
- 适用于组件内部状态管理，特别是当组件的状态更新逻辑较为复杂，需要通过多个action来处理不同的状态变化情况，并且该状态仅在组件内部使用，不需要与其他组件共享时。例如一个复杂的表单组件，其内部有多种状态（如输入框的值、表单是否提交、是否显示错误提示等），并且这些状态的更新逻辑相互关联，此时使用useReducer可以将这些复杂逻辑封装在组件内部，提高组件的可维护性。
Redux：
- 适用于大型应用程序，当应用的状态需要在多个组件之间共享，并且需要进行集中式管理和跟踪状态变化时。例如电商应用中的购物车功能，购物车的状态（商品列表、总价等）需要在多个页面（商品详情页、结算页等）中共享和更新，使用Redux可以方便地实现这种全局状态管理，同时利用其强大的工具（如Redux DevTools）来调试和跟踪状态变化。

数据流动差异

useReducer：
- 数据流动局限于组件内部。组件通过dispatch触发reducer更新自身状态，不涉及跨组件的数据传递。例如上述Counter组件，状态更新仅影响该组件自身的渲染，不会对其他组件产生直接影响。
Redux：
- 数据流动是单向且全局的。所有组件都可以dispatch action，action会触发store中的reducer更新状态，更新后的状态会通知所有订阅了该状态的组件重新渲染。例如在一个多页面应用中，一个组件dispatch了一个更新用户信息的action，这个action会导致store中的用户信息状态更新，所有依赖该用户信息状态的组件（如导航栏显示用户昵称的组件、个人中心页面等）都会重新渲染。

星途面试题库

面试题：React的useReducer与Redux在复杂状态管理上的差异

知识考点

面试题答案

原理差异

使用场景差异

数据流动差异