react 与 vue 使用心得

前言

刷了一波 react 文档,想找个东西练练手，在网上一看，什么实现一个 网易云、酷狗音乐、豆瓣 感受找接口都够费神了,以前作过 vue 实现饿了么的一个系统，图片资源，mock 数据齐全，再加之样式写过了，因此直接就拿来用了。本文旨在浅显的描述一下写完这个项目的心得体会，欢迎斧正。这里是 项目地址和 项目展现地址

一、 起手式

• 在经历了 一、vue-cli改编；二、generator-react-app（你能够看到总体项目目录仍是有他的影子）；最终回到了 create-react-app，相比 vue-cli 的 webpack 模板，它使用样式预处理器须要一、npn run eject；二、本身往 loader 里塞东西,包括 build 的时候用到 extractTextPlugin。不熟悉 webpack 的人可能会有点 egg pain 不舒服。
• 固然你也能够选择官方推荐的方式和react-app-rewired；官方推荐的方式我以为很不爽，由于你用 webpack 干吗还要本身经过另外的方式去处理，react-app-rewired看上去是一种不错的解决方案，可是须要去找相应的插件，再者用惯了 vue-cli 没有看到相应的配置文件，很没有安全感啊。

二、 文档

简单的归纳就是 react不错,vue 真香（多是本菜见过最棒的文档吧）。

三、 生命周期

• vue 生命周期（根据生命周期图以及项目经验本身假想，保证不正确，可是逻辑好像说的通，不深究了解一哈）

  1. 根据传入的 config,挂上mixin
  2. 经过 proxy 对对象属性进行的代理
  3. 初始化生命周期：vue 对象上属性赋值，包括一些$parent、$attrs、$root,而后挂上各类钩子函数，具体什么钩子就不哔哔了。
  4. 初始化事件：我理解就是 vue 对象的事件模型的初始化对应的 api 就是 看这里。
  5. 调用 beforeCreated
  6. provide + inject + 响应式初始化（我理解就是初始化依赖收集队列,挂上definePrototype的set/get）
  7. 调用 created 钩子
  8. 有 el 找 template，没 el 先挂起等对象调用$mount 再找 template
  9. 一、找 render 函数渲染，二、render 木有找 template 撸成 render 函数渲染，三、el 的 html 模板而后渲染，四、都木有？去死，上一步确保有了。
  10. 调用 beforeMount 钩子
  11. 渲染一波，而后把渲染后的元素赋值给 $el 并取代 el。
  12. 调mouted 钩子
  13. 监听数据改变而后对视图进行更新而后更新先后分别调用 beforeUpdate update 钩子；
  14. 当调用 distroy 进行销毁时，先调用 beforeDestory 钩子，而后对子组件、以前的收集的依赖、事件监听进行卸载。而后调用 destroy 的。

• react 生命周期(结合尝试经验和这篇博客理解)

  1. 获取设置组件的 defaultProps 了改一哈；
  2. constructor 里初始化 state,听说 createReactClass 写法里是 getInitialState 钩子（我没用过）。

  // getInitinalState 还有一个用法，就是不管啥时候都能用它获取到初始状态的，试想你重置表单？
    
    const a = this.getInitialState()

  1. 而后 willMouted + render + didMoutd
  2. 当父组件的props变化时 会调用 willRecevieProps(这里一度让我觉得会存在 didRecevieProps，逼死强迫症啊)
  3. 当监听到 state 或者 props 发生变化（其实调用 setState 就会触发）的时候会调用 shouldComponentUpdate 钩子，根据返回值来肯定是否须要从新调用 render；
  4. 当 shouldComponentUpdate 返回值为 true，调用 willUpdate 函数
  5. 当 shouldComponentUpdate 返回值为 false 啥也不干（皮一下真的很开心）
  6. 调用 render 函数
  7. didUpdate
  8. WillUnmount 组件被干掉前调用

总结一哈（一家之言）：

• vue 的前戏比较足，准备充分，当数据变化引起的更新开销小，某条数据改变可以根据依赖搜集快速的定位局部构建 vdom ,进行视图更新，并且提供了大量的 api 方便 coder；
• react 前戏比较快，直接进入主题，首次渲染比较快，可是数据更新处理就须要从新构建树而后遍历，shouldComponentUpdate能够作部分性能优化。

四、 大 API 和小 API

同为渐进式框架，vue提供了大量的 API 对数据、视图去进行处理。

1. vue视图提供了一系列的指令控制视图，v-show、v-for、v-model...,react 的话都要经过本身display、map、onPrototypeChange...去实现
2. 关于数据处理，vue 有 filter,computed 对数据进行监听过滤，react。。。

就此而言 vue 的 code 开销可能少一点。。

五、状态管理

这里只比较 vuex 和 redux，说实话 redux 用的很不爽啊。

1. 改变数据: redux 是经过 reduder 返回。这特么就意味修改我每修改一次，哪怕是 a.b.c 这种层级，就要返回整个 state，为了精简必须得拆，当返回是一个索引类型滴咱们就须要 [...a] 或者 {...a}要否则根本不会触发组件内 props 改变。vuex 经过 mutation 直接赋值便可，当有新属性添加Vue.$set。
2. 注入组件: react-redux 经过全局 Provider + 组件的 connect,经过 mapStateToProps + mapDispathToProps 将 state 和 dispatch 注入到组件的 props 中。vuex 是将 store 注入根节点，组件经过 $store 或者 mapxxx 进行访问。
3. 数据筛选 : react 在 mapStateToProps 中处理， vuex 在 getter 上处理。
4. 模块划分 : react 返回各个 reducer 而后 combine，vuex 是塞到 module 里。

六、生态

1. web 方面，vue 官推全家桶，到目前为止，vue 的一些开源组件也是很丰富的目前都能知足我所接触的业务要求。react 生态...感受更大，由于可选项太多了，拿动画来讲 motion、animated、groupCssTransition...(ps:groupCssTransition处理路由过渡动画的时候，有个坑，我好比我想实现 a->b 页面是从右到左的特效，b->a是从左到右的特效会存在一个老坑，具体你们能够把RouterAnimation的childFactory去掉试试，不详述。)从这点来讲 react 更加 渐进式 一点；
2. native 方面，记得去年看 weex，我连官方 demo 都没跑起来，不知道如今咋样；react native 没跑过，不过不少成功案例，加上最近出的泰罗奥特曼听上去棒棒哒。
3. 微信小程序：wepy mpvue ??????我选择用原生主要是由于预览还要再开一个 ide 很不开心。

结

emmmmmm....感受有点帮助的点个赞吧。