Connect组件的原理是什么?

简介: Connect组件的原理是什么?

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

作用:连接React组件与Redux Store


mapStateToProps允许我们将 store 中的数据作为 props 绑定到组件上

mapDispatchToProps将action作为props绑定到MyComp上。

mergeProps不管是stateProps还是dispatchProps,都需要和ownProps merge 之后才会被赋给MyComp。connect的第三个参数就是用来做这件事。通常情况下,你可以不传这个参数,connect就会使用Object.assign替代该方法。


首先connect之所以会成功,是因为Provider组件:


在原应用组件上包裹一层,使原来整个应用成为Provider的子组件

接收Redux的store作为props,通过context对象传递给子孙组件上的connect

那connect做了些什么呢?

它真正连接 Redux 和 React,它包在我们的容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。


connect是一个高阶函数,首先传入mapStateToProps、mapDispatchToProps,然后返回一个生产Component的函数(wrapWithConnect),然后再将真正的Component作为参数传入wrapWithConnect,这样就生产出一个经过包裹的Connect组件,该组件具有如下特点:


通过props.store获取祖先Component的store

props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState,作为props传给真正的Component

componentDidMount时,添加事件this.store.subscribe(this.handleChange),实现页面交互

shouldComponentUpdate时判断是否有避免进行渲染,提升页面性能,并得到nextState

componentWillUnmount时移除注册的事件this.handleChange

相关文章
|
6月前
|
缓存 JavaScript UED
深入了解 keep-alive:作用、使用步骤、适用场景及示例代码
keep-alive 是 Vue.js 中的一个内置组件,`用于缓存不活动的组件实例,避免重复渲染 DOM,从而提高性能和用户体验`。
|
6月前
|
存储 缓存 JavaScript
Uservue 中 keep-alive 组件的作用
Uservue 中 keep-alive 组件的作用
66 0
|
1月前
|
缓存 JavaScript UED
Server-Sent Events 和 WebSocket 之间有什么区别
Server-Sent Events (SSE) 和 WebSocket 分别代表单向和双向通信机制。SSE,基于 HTTP,仅允许服务器向客户端发送事件流;而 WebSocket 是双向实时通信协议,支持客户端与服务器的双向交互。SSE适合低实时性场景,依赖长轮询或流传输;WebSocket 提供更低延迟,适用于高实时性应用。两者在现代浏览器中普遍被支持,但旧版浏览器或特定网络环境可能影响兼容性。选择哪种机制取决于实际需求,如通信方向、实时性要求及目标浏览器支持。
|
6月前
|
安全
【第二章】信号与槽——connect函数的用法
【第二章】信号与槽——connect函数的用法
|
3月前
|
前端开发 JavaScript 算法
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
React Server Component 使用问题之想在路由切换时保持客户端状态,如何实现
|
3月前
|
前端开发 JavaScript PHP
React Server Component 使用问题之路由的能力,如何实现
React Server Component 使用问题之路由的能力,如何实现
|
存储 JavaScript API
39 # events 模块的实现原理
39 # events 模块的实现原理
34 0
|
JavaScript 前端开发 API
【说说Connect组件的原理是什么?】
【说说Connect组件的原理是什么?】
|
JavaScript 前端开发 容器
说说Connect组件的原理是什么?
说说Connect组件的原理是什么?
62 0