夕阳枫的博客

1、前言   combineReducers 和 bindActionCreators 是 Redux 提供的两个辅助函数，即使不使用他们，也能够正常的使用 Redux。 但是如果利用好这两个辅助函数，将会使得你的代码更加易于维护，特别是 combineReducers 。2、combineReducers  在之前的章节中多次提到combineReducers，实际开发中所有 state ...

1、applyMiddleware 介绍   applyMiddleware 作为 Redux 的核心 api 之一，本质就是在 dispatch 更改 reducer 之前做一些操作，具体的实现其实就对 store 的增强，其中最终是对 store 中的 dispatch 的增强。关于 applyMiddleware 的使用可参考上一章节 Redux源码分析(1) - Redux介绍及使用 ...

1、前言  下边章节中将详细分析源码，源码分析中对于一些边界的判断、类型判断等不做重点分析，主要将分析的重点放在主流程方向上。2、createStore   createStore 作为 Redux 的核心 api 之一，其作用是通过 reducer 和 中间件 middleware 构造一个为 store 的数据结构。关于 createStore 的使用可参考上一章节 Redux源码分析(...

1、Redux生态的介绍  关于 Redux 的介绍可以参考: Redux 中文文档。Redux 是 JavaScript 状态容器，提供可预测化的状态管理。通常在 React 中使用 Redux 时，还使用到React-Redux、Redux-Saga。  Redux作为全局的状态管理器，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存...

1、基本概述  由京东凹凸团队开源的小程序框架Taro （https://taro.aotu.io/），以及对应UI框架Taro-UI （https://taro-ui.jd.com/#/），是一套遵循 React 语法规范的 多端开发 解决方案。根据官方介绍：   现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所...

  不管是微信小程序还是Taro、TaroUI的组件都没有提供日期时间组件。基于Taro、TaroUI封装了日期时间组件DateTimePicke。代码地址：github： https://github.com/zhengchangshun/TaroUI-DateTimePicker1、效果图2、参数说明参数描述是否必传默认initValue传入组件的日期时间初...

1、基本概述   根据产品的需求，会针对一些页面做PV/UV的统计。埋点的实质就是向埋点服务器发送请求，埋点服务器埋点的数据做统计。正常情况下，我们需要在埋点的页面里添加埋点代码。而埋点的代码与实际的业务代码，是没有任何关系，往往会造成大量恶心的代码掺杂在业务代码中。   埋点接入时，首先通过script标签，引入埋点的js文件，具体参考对应的埋点系统的api文档。针对具体的场景加入埋单代码，...

   在移动端开发过程中，响应式布局是必须要考虑的一个问题。基于UmiJs开发时，使用的组件库是antd-mobile，通过在.umirc.js中添加配置项，及可以通过对于的postCss插件postcss-px-to-viewport解决响应式布局的问题。代码如下：extraPostCSSPlugins: [ require('postcss-flexbugs-fixes'), ...

1、基本概述   在上一篇博客：基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装中，已经详细介绍了通过配置生成表单组件的方法，在开发中我们不必过分关心view层的编码，可以减少重复代码的编写，提高开发效率。列表搜索和操作类弹窗（新增、修改等）等都会应用到表单元素，因此在已有的可配置的表单组件GenerateForm的基础上进行二次封装，分别封装了可配置的搜索组件ListFilte...

1、基本概述  项目开发过程中，表单组件是最常用的组件之一，应用场景也多见于列表搜索、简单的新增和编辑弹窗、复杂的新增和编辑页面。Ant design的组件库中Form表单也提供了对应的API可供开发使用，极大的提高的开发速度。  在单独的页面里，我们通常引入Form组件及其对应的表单项组件（例如Input、Select、Checkbox等等）。由于通过Form.create()去处理当前组件...

1、基本概述   在项目开发过程中，通常的企业后台系统会包含头部（Header）、侧边栏（Sider），主体内容（Content）以及底部（Footer）。通常情况下我们会在Layout文件中布局，并对头部、侧边栏、底部封装成对应的组件，而针对主体内容部分，通过路由来控制显示不同的内容。   但是也存在一些页面不需要按照上边的布局方式来展示，例如登录、注册，或者其他类似的页面。   针对上述...

1、基本概述  基于前后端分离的开发模式下，前端通过HTTP请求接口数据是前后端连接的纽带。HTTP协议中规定了GET、POST、PUT、DELETE等请求方式，在通常的业务开发中，最常用的请求方式是GET、POST。被我们熟知的是GET的参数会携带在URL上，POST请求的参数跟随HTTP请求的body传递，关于GET请求和POST的区别，可以自行研究。  在实际开发过程中，HTTP的Hea...

1、.roadhogrc.mock.js  roadhog支持mock功能，如需mock 功能，在 .roadhogrc.mock.js 中添加配置即可，在开发环境下启动server时，将开启mock功能；也可以通过配置在开发环境下关闭mock功能。//.roadhogrc.mock.js// 是否禁用代理const noProxy = process.env.NO_PROXY =...

  本章节包含路由信息(common/router)、侧边栏菜单信息(common/menu)、基本路由（一级路由）UserLayout组件，BasicLayout组件、以及侧边栏SiderMenu组件中对数据的处理。主要涉及到以下几个方法，分别逐个分析其功能。 备注：本文中代码部分只截取涉及到的相关代码，完整代码请查看ant design Pro官方代码。1、getMenuData...

1、getSelectedMenuKeys 获取选中的菜单的key getSelectedMenuKeys = () => { const {location: {pathname}} = this.props; return getMeunMatchKeys(this.flatMenuKeys, urlToList(pathname)); };   get...

  以登录模块为例，对ant design pro的组件封装都相关分析。登录模块包含基础组件的封装、组件按模块划分、同类组件通过配置文件生成、跨层级组件直接数据通信等，相对来说还是具有一定的代表性。1、登录模块流程图  首先，全局了解一下登录模块的总体流程。如下图所示。该流程图主要分两部分：1、页面布局；2、组件封装。黄色实线表示页面中组件的引用。下边会对基础组件分析，以及多层级组件直接的...

1 、connect 多个model  以下为redux的API中对connect方法的定义： connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])  实际过程中使用最多的是mapStateToProps（另外两个参数暂时不做讨论），如果定义该参数，组件将会监听 Redux store ...

1、React.Children  React.Children 是顶层API之一，为处理 this.props.children这个封闭的数据结构提供了有用的工具。 this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ；如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this....

  前后端分离开发过程中，前端需要独立发布项目。在当前vue、react等前端主流框架下开发，都是SPA页面，具体的如何发布到web服务器上。如何配nginx规则。直接看配置文件吧，重点部分都含有注释，其他nginx的默认配置指不做处理。主要配置在nginx的 conf/nginx.config文件，如下所示：#user nobody;worker_processes 1;#e...

1、基本概念阐述  阅读本文前，你需要对react、dva、umi以及ant design的有一定的认识，具体的相关知识都可以参考官方文档。  Umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架，是蚂蚁金服的底层前端框架。具体的可参考官方文档：https://umijs.org/zh/guide/ ， 本质上来讲Umi是一个react的框架。  Dva，也是有蚂蚁金服推出的...

1、一级路由 const routerData = getRouterData(app); const UserLayout = routerData['/user'].component; const BasicLayout = routerData['/'].component; return ( <LocaleProvider locale={zhCN}&g...