【说说Connect组件的原理是什么?】

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

react-redux用于连接react组件及redux,方便开发者使用redux

管理状态。其中connect方法是关键,用法如下:

connect([mapStateToProps], [mapDispatchToProps])(component)

看connect使用方法就知道是高阶组件,接收参数为mapStateToPropsmapDispatchToProps俩个方法,返回的函数接收参数是组件,从而返回一个新的组件。

首先connect之所以会成功得原因

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

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

那connect做了些什么呢

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

概括:react-redux 库提供的一个 API,connect 的作用是让你把组件和store连接起来,产生一个新的组件(connect 是高阶组件)


相关文章
|
3月前
|
存储 缓存 JavaScript
Uservue 中 keep-alive 组件的作用
Uservue 中 keep-alive 组件的作用
31 0
|
Kubernetes 网络协议 容器
kubernates(K8s) 踩坑日记(一)init初始化报错 dial tcp [::1]:10248: connect: connection refused
kubernates(K8s) 踩坑日记(一)init初始化报错 dial tcp [::1]:10248: connect: connection refused
2273 0
kubernates(K8s) 踩坑日记(一)init初始化报错 dial tcp [::1]:10248: connect: connection refused
|
8月前
|
JavaScript 前端开发 容器
Connect组件的原理是什么?
Connect组件的原理是什么?
47 0
|
8月前
|
JavaScript 前端开发 容器
说说Connect组件的原理是什么?
说说Connect组件的原理是什么?
38 0
|
8月前
|
存储 缓存 JavaScript
keep-alive组件的作用与原理
keep-alive组件的作用与原理
112 0
|
10月前
|
前端开发 JavaScript 中间件
手写 Vite Server 系列(3)—— 更细粒度的复用
手写 Vite Server 系列(3)—— 更细粒度的复用
91 0
|
存储 移动开发 JavaScript
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
这篇文章主要是用WebSocket技术实现一个即时通讯聊天室。从0到1一步一步的编写所有代码,上手容易
486 0
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
|
JavaScript API 索引
全局API之Vue.set 监听数据层的数据变化
全局API之Vue.set 监听数据层的数据变化
|
存储 缓存 JavaScript
keep-alive的使用场景跟原理分析(超详细讲解)
keep-alive的使用场景跟原理分析(超详细讲解)
574 0
keep-alive的使用场景跟原理分析(超详细讲解)
|
存储 缓存 JavaScript
vue面试题4:1.组件通信;2.路由嵌套;3.< keep-alive >作用
请说明< keep-alive >组件的作用 当< keep-alive >包 裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 < keep-alive >是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。 当在< keep-alive >内切换组件时,它的activated 和deactivated 这两个生命周期钩子函数将会执行。
169 0