Redux中的connect的相关知识点
redux中connect是什么?
connect() 函数将 React 组件连接到 React store。 它向连接的组件提供其需要从 store 中获取的数据片段,以及可以用来向 store dispatch actions 的功能。
connect是高阶组件,接受两个方法,返回的函数接收参数是组件,从而返回一个新的组件。
如下:
connect([mapStateToProps], [mapDispatchToProps])(component)
Redux中的connect有什么作用?
connect负责连接React和Redux
connect作用是让你把组件和store连接起来,产生一个新的组件(connect 是高阶组件)
-
获取state connect 通过 context获取 Provider 中的 store,通过 store.getState() 获取整个store tree 上所有state 包装原组件 将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect,Connect重新 render 外部传入的原组件 WrappedComponent ,并把 connect 中传入的 mapStateToProps,mapDispatchToProps与组件上原有的 props 合并后,通过属性的方式传给 WrappedComponent 监听store tree变化 connect缓存了store tree中state的状态,通过当前state状态 和变更前 state 状态进行比较,从而确定是否调用 this.setState()方法触发 Connect 及其子组件的重新渲染
redux的connect( )参数
connect接受四个参数
-
mapStateToProps?: Function mapDispatchToProps?: Function | Object mergeProps?: Function (不常用) options?: Object (不常用)
mapStateToProps 和 mapDispatchToProps 分别处理 Redux store 的 state 和 dispatch。state 和 dispatch 将作为第一个参数提供给 mapStateToProps 或 mapDispatchToProps 函数。
connect工作流程
Provider组件,在原应用组件上包裹一层,使原来整个应用成为Provider的子组件 接收Redux的store作为props,通过context对象传递给子孙组件上的connect
它真正连接 Redux 和 React,它包在我们的容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件