dva 开发主要是将 [视图] 和 [数据]分开。其数据管理在 model。
model:
1 namespace :命名空间,也是全局 state 上到一个属性
2 state : 初始化值
3 reducer : 一个纯函数,处理 同步操作, [唯一] 可以操作修改 state 的地方,由 action 触发,有两个参数 { state, action }
4 effects: 处理异步的操作, “不能” 直接修改 state! 必须由 action 触发,也可以触发action,其内函数必须是 [generator] 函数,拥有action 和 effects 两个参数,其中 effects 参数包含三个字段 { put, call, select } ,put主要用于触发 action,call 用于调用异步处理,select 从 state 中获取数据
5 subscriptions : 订阅数据源,并根据情况 dispatch 某些 action,有一个参数,该参数中有 { dispatch, history } 字段
connect : dva 提供了 connect 方法用于将component和model 连接起来,connect 后的组件除了可以获得 dispatch 和 state 还可以获得 location 和 history,
dispatch: const { dispatch } = this.props; dispatch({ type:'count/add' }). dispatch 可以直接调用 effects,也可以直接调用 reducers。如果同名,会一起调用,优先执行 reducers。被connect的 componnets会自动在 props上添加 [dispatch]
setState 会合并之前调用 setState所修改的值,它并不会立即改变state中的值,而是将其放进一个队列(类似浏览器的事件队列),最终将多个 setState 合并,一次性更新页面,其经历的生命周期如下:
1⃣️shouldComponentUpdate
2⃣️componentWillUpdate
3⃣️render => state值在render之后才会被真正的修改
4⃣️componentDidUpdate
React-router:
当URL规则比较复杂的时候,例如:/user/:userID/search,匹配userId比较麻烦,此时推荐使用 [path-to-regexp] 简化逻辑
eg:import PathToRegexp from ‘path-to-regexp’
const match = PathToRegexp('/user/:userId/search').exec(pathname)
if (match) const userId = match[1]
react16 新增处理错误信息的生命周期勾子: [componentDidCatch]
由 react 控制的事件处理过程 setState 不会同步更新 this.state!也就是说,在 react 控制之外的情况,setState会同步更新this.state (setState 并不能保证同步)
react 关于大型项目的懒加载问题:[huge-apps],它将react-router和webpack的 [require.ensure]结合起来,就解决的问题