前端/移动开发面试题更新 2026-08-05

请描述在 React 应用中,state 数据从 reducer 出发最终被组件接收的完整流程,包括中间涉及的 store、dispatch、select 等关键环节,并说明它们如何协同工作。

前端/移动开发技术原理ReactRedux

考察说明

本题考查对 React 状态管理(特别是 Redux 模式)数据流和组件注入机制的理解。

回答思路

  1. 【回答框架 1】在 Redux 中,state 由 reducer 纯函数生成,并通过 createStore 创建唯一的 store。store 负责保存 state、提供 getState、dispatch 和 subscribe 方法,reducer 在 dispatch 时被调用,返回新的 state 对象。
  2. 【回答框架 2】组件通过 connect(高阶组件)或 useSelector/useDispatch(Hooks)从 store 中获取数据。connect 基于 mapStateToProps 订阅 store 的变化,当 state 更新时,通过 context 或 props 将数据传递给组件,触发重新渲染。
  3. 【回答框架 3】useSelector 使用订阅机制,内部通过 useSyncExternalStore 保证并发特性下的数据一致性,并在 state 变化时返回新值,触发组件重渲染。
  4. 【回答框架 4】整体流程为:用户触发事件 -> dispatch(action) -> reducer 计算新 state -> store 通知订阅者 -> 组件重新渲染。
  5. 【关键点 1】state 由 reducer 生成,存储在单一的 store 中。
  6. 【关键点 2】组件通过 connect 或 useSelector 订阅 state 变化,实现数据注入。
  7. 【关键点 3】数据流是单向的:dispatch -> reducer -> store -> 组件。
  8. 【易错点 1】不要直接修改 state,需通过 reducer 返回新的对象以触发更新。
  9. 【易错点 2】useSelector 的返回值变化可能导致额外渲染,需合理使用浅比较。