React从初识到深知

173 阅读2分钟

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