react中redux的connect作用是什么

一、connect 的作用（一句话）

connect 用来把 Redux store 的 state 和 dispatch 注入到 React 组件中，使组件能读取和修改全局状态。

二、connect 解决了什么问题？

React 组件本身：

• 不能直接访问 Redux store

• 不能订阅 store 变化

• 不能 dispatch action

👉 connect 做了桥梁（bridge）作用

Redux Store ↔ React Component

三、connect 的核心功能

✅ 1. 读取 Redux state

mapStateToProps

✅ 2. 派发 action

mapDispatchToProps

✅ 3. 订阅 store 更新

• state 变化 → 组件自动 re-render

四、connect 基本用法示例

import { connect } from 'react-redux'; function Counter({ count, add }) { return ( <> <p>{count}</p> <button onClick={add}>+</button> </> ); } const mapStateToProps = (state) => ({ count: state.counter, }); const mapDispatchToProps = { add: () => ({ type: 'ADD' }), }; export default connect(mapStateToProps, mapDispatchToProps)(Counter);

五、connect 做了哪些事？（底层原理）

1️⃣ 订阅 Redux store

store.subscribe()

监听 state 变化

2️⃣ 计算 props

• 执行mapStateToProps(state)

• 执行mapDispatchToProps(dispatch)

3️⃣ 注入组件

<Component {...props} />

4️⃣ 控制重渲染（性能优化）

• shallowEqual

• selector

• memo

👉只在 state 相关变化时 render

六、connect vs Hooks（useSelector / useDispatch）

Redux 新推荐写法

const count = useSelector(state => state.counter); const dispatch = useDispatch();

为什么 connect 仍然重要？

• 老项目大量使用

• 性能可控

• HOC 模式清晰

七、connect 的性能优化点（面试加分）

• 避免全量订阅

• 选择性订阅 state slice

• shallow compare

• memoized selector（reselect）

八、面试标准回答（30 秒）

connect 是 react-redux 提供的高阶组件，用于把 Redux store 中的 state 和 dispatch 映射为组件的 props；
它内部订阅 store 更新，在 state 变化时触发组件重新渲染，并通过浅比较减少不必要的更新。

九、面试官常追问（你已经稳了）

• connect 为什么性能好？

• HOC 和 Hooks 有什么区别？

• useSelector 如何避免重渲染？

• connect 和 Context 有什么关系？

十、一句话终极总结

connect = Redux 与 React 的桥梁。