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 的桥梁。

---