dva-generator
dva-generator copied to clipboard
jnotnull
dva code generator, including perfect-fetch
1. 在初始化模型setup中获得url参数 ``` subscriptions: { setup({ dispatch, history}) { history.listen((url, state) => { if (pathToRegexp('/static/room/ctrlmemberdetail').test(url.pathname)) { dispatch({type:'initData', payload: {chatroom_id: url.query.chatroom_id, wechat_id: url.query.wechat_id}}); } }); } }, ``` 2. 本地开发请求支持跨域，proxy.cofig.js中增加如下： ```...
React沉思录
> 使用React也有一年多时间了，也是时候拿起笔杆子整理下了。以下算是自己对React的一份理解。当然每一点如果放开写的话都可能写上好几页，时间有限，先奉上这么多，有错误欢迎指正。 ### 1. 什么是React `A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES` 这是React官方的定义。从这里面我们能得到两层含义：1. 它首先是一个库，不是框架。2. 用来构建用户界面的，也就是说是专注于view层的。 因为是库，所以可以很方便的和前端生态系统中的其他库融合到一起，比如Redux等。通过引入Redux，它就不再简单的处理view层了，Controller层和Model层也收入旗下了。 它有两个重要的特征：一个就是Virtual DOM，另一个就是JSX。当然了Virtual DOM和JSX也可以用在其他框架。 ### 2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了，通过继承React.Component，加入constructor构造函数，实现Render方法即可。这当中React组件为我们提供了很多钩子，以便更加方便精细的控制程序。 钩子包括：componentWillMount/componentDidMount，同时在调用setState时候会触发：componentWillReceiveProps/shouldComponentUpdate/ComponentWillUpdate/render/ComponentDidUpdate。另外在最新发布的16版本中添加了componentDidCatch(error, info) 钩子来为组件做异常边界。 值得注意的是，不能在ComponentWillUpdate使用setState方法，否则会造成循环调用，这是因为componentWillMount是在render前触发的，因此设置state不会触发再次渲染。 ### 3. 什么是JSX...
### 背景 根据React官方定义，React是解决UI层的库，所以在实际项目中要想完成功能，必须借助其他手段来完成其它层的定义和控制。Redux的出现很好的解决了数据流的问题，完成了其它层的定义和控制。 ### 和传统MVC相比的优势 我们先看下传统的MVC结构。 ``` + Input | | +-------v------+ +---------+ Controller +---------+ | +--------------+ | | | | | | | +------v-------+ +-------v------+ | Model | |...
> 场景：针对查询消息历史记录，广播消息事件下有多个群，每个群下有对应的动作，三个view之间的关系如下 `eventlist => roomlist => actionlist`，点击某个event到达roomlist，点击某个room到达actionlist。因为这三者(eventlist, roomlist, actionlist)依赖关系比较强，而且会被多个地方调用，他们三者就封装为一个组件（Component）了。随着点击的深入，如何返回到上一级就变成现实的问题了，即使你在组件中提供了返回按钮，也不能保证用户那天不点击浏览器的返回按钮。 ### 现有解决方案： 1. 使用弹出框 这个在PC端还行，在H5端反复的弹出框就显得蛋疼了, say no。 2. 服务端渲染 依靠服务端渲染，由服务端提供基础路由。改动量太大，say no。 3. 改成多页应用 这个和服务端渲染类似，只是基础路由由文件夹路径提供而已，改动还是大，say no。 4. 使用React-Router的childRoutes属性，定义不同路由指向不同的Component，但是面临的问题就是要把组件打散，分配配置每个child路由对应的Compoent，也就是说这里的公共组件至少拆分成三个，而且还不好解决组件共用问题，fuck，这我哪能受得了，say no。 ### 最终方案：BrowerHistory +...
>DVA是一个优秀的框架，它很好的集成了Redux和Saga，极大的方便了开发者的异步处理，为我们快速开发提供可能。为什么说DVA是一个框架，而不是库呢。下面我们从源码中给出答案。 在调用 `const app = dva();` 初始化之后，dva为我们提供了三个参数入口，分别为app.model、app.router、app.start。那我们就先看下这个最核心部分的初始化过程。 在createDva文件中的dva方法下的如下部分： const app = { // properties _models: [], _router: null, _store: null, _history: null, _plugin: plugin, _getProvider: null, // methods use, model,...