react dva 的 connect 与 @connect
React connect
2023-09-11 14:16:38 时间
https://dvajs.com/guide/introduce-class.html#connect-方法
connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能,譬如dispatch
connect 的使用
【connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数,该函数需要返回一个对象,用于建立 State 到 Props 的映射关系。】
简而言之,connect接收一个函数,返回一个函数。
第一个函数会注入全部的models,你需要返回一个新的对象,挑选该组件所需要的models。
export default connect(({ user, login, global = {}, loading }) => ({ currentUser: user.currentUser, collapsed: global.collapsed, fetchingNotices: loading.effects['global/fetchNotices'], notices: global.notices }))(BasicLayout); // 简化版 export default connect( ({ user, login, global = {}, loading }) => { return { currentUser: user.currentUser, collapsed: global.collapsed, fetchingNotices: loading.effects['global/fetchNotices'], notices: global.notices } } )(BasicLayout);
@connect的使用
其实只是connect的装饰器、语法糖罢了。
// 将 model 和 component 串联起来 export default connect(({ user, login, global = {}, loading }) => ({ currentUser: user.currentUser, collapsed: global.collapsed, fetchingNotices: loading.effects['global/fetchNotices'], notices: global.notices, menuData: login.menuData, // by hzy redirectData: login.redirectData, // by hzy }))(BasicLayout);
// 改为这样(export 的不再是connect,而是class组件本身。),也是可以执行的,但要注意@connect必须放在export default class前面: // 将 model 和 component 串联起来 @connect(({ user, login, global = {}, loading }) => ({ currentUser: user.currentUser, collapsed: global.collapsed, fetchingNotices: loading.effects['global/fetchNotices'], notices: global.notices, menuData: login.menuData, // by hzy redirectData: login.redirectData, // by hzy })) export default class BasicLayout extends React.PureComponent { // ... }
相关文章
- React系列——websocket群聊系统在react的实现
- 基于React-Native0.55.4的语音识别项目全栈方案
- [React] Using react-styleguidist for Component demo
- [React] useImperativeHandle + forwardRef
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Storybook] Get started with Storybook for React
- [Recompose] Handle React Events as Streams with RxJS and Recompose
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React Fundamentals] Component Lifecycle - Mounting Usage
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- [React Testing] Intro to Shallow Rendering
- 用 React Hooks 造轮子
- [React] Using react-styleguidist for Component demo
- [React] Avoid this Common Suspense Gotcha in by Reading Data From Components
- [React] Get Previous Resource Values with React’s useDeferredState Hook
- [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application
- [React] Optimistic UI update in React using setState()
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] Extracting Private React Components
- React课程学习
- React 入门实例教程
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- 用React开发SAP Fiori应用
- windows环境里React-Native运行失败的原因之一,缺少依赖
- 技术实践丨React Native 项目 Web 端同构
- 从React 编程到"好莱坞"
- 从React源码来学hooks是不是更香呢