在 React 应用中,Redux 是如何在底层实现属性(props)的传递与分发的?请说明其核心机制和数据流。
考察说明
考查对 Redux 数据流和 React 上下文(Context)机制的理解,以及属性传递的具体实现原理。
回答思路
- 【回答框架 1】Redux 的核心是单一 store 和纯函数 reducer,组件通过 connect 或 useSelector 获取状态。属性传递并非手动逐层传递,而是依赖 React 的 Context API 或发布-订阅模式。
- 【回答框架 2】react-redux 使用 Context 提供 store 给后代组件,connect 函数通过 mapStateToProps 和 mapDispatchToProps 将状态和 action 转换为 props,并订阅 store 变化,触发组件更新。
- 【回答框架 3】当 store 状态变化时,connect 会通过 Subscription 机制通知所有订阅的组件,组件重新计算映射的 props,并执行浅比较(shallowEqual)决定是否重新渲染,避免不必要的渲染。
- 【回答框架 4】对于函数组件,useSelector 使用 useSyncExternalStore(或早期版本的订阅)实现状态选择,并自动处理订阅和更新,确保状态一致性。
- 【关键点 1】Redux 属性传递的核心是 react-redux 的 connect 和 Context,而不是逐层手动传参。
- 【关键点 2】connect 通过 mapStateToProps 将全局状态映射为组件 props,并订阅 store 变化。
- 【关键点 3】useSelector 用于函数组件,使用 useSyncExternalStore 保证并发渲染下的正确性。
- 【易错点 1】不要误以为 Redux 组件间属性传递需要逐层传递,内部通过 Context 实现。
- 【易错点 2】未优化 connect 或 useSelector 可能导致组件频繁渲染,需使用浅比较和选择器。