React从初识到深知

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]结合起来，就解决的问题

转载于:https://juejin.im/post/5bda93275188257f754de7ed