摘要：调用钩子渲染一波，然后把渲染后的元素赋值给并取代。大和小同为渐进式框架，提供了大量的对数据视图去进行处理。微信小程序我选择用原生主要是因为预览还要再开一个很不开心。
前言
刷了一波 react 文档,想找个东西练练手，在网上一看，什么实现一个 网易云、酷狗音乐、豆瓣 感觉找接口都够费神了,之前做过 vue 实现饿了么的一个系统，图片资源，mock 数据齐全，再加之样式写过了，所以直接就拿来用了。本文旨在浅显的描述一下写完这个项目的心得体会，欢迎斧正。这里是项目地址和项目展示地址1、 起手式
在经历了 1、vue-cli改编；2、generator-react-app（你可以看到整体项目目录还是有他的影子）；最终回到了 create-react-app，相比 vue-cli 的 webpack 模板，它使用样式预处理器需要1、npn run eject；2、自己往 loader 里塞东西,包括 build 的时候用到 extractTextPlugin。不熟悉 webpack 的人可能会有点 egg pain 不舒服。
当然你也可以选择官方推荐的方式和react-app-rewired；官方推荐的方式我觉得很不爽，因为你用 webpack 干嘛还要自己通过另外的方式去处理，react-app-rewired看上去是一种不错的解决方案，但是需要去找相应的插件，再者用惯了 vue-cli 没有看到相应的配置文件，很没有安全感啊。
2、 文档简单的概括就是 react不错,vue 真香（可能是本菜见过最棒的文档吧）。3、 生命周期
vue 生命周期（根据生命周期图以及项目经验自己假想，保证不正确，但是逻辑好像说的通，不深究了解一哈）
根据传入的 config,挂上mixin
通过 proxy 对对象属性进行的代理
初始化生命周期：vue 对象上属性赋值，包括一些$parent、$attrs、$root,然后挂上各种钩子函数，具体什么钩子就不哔哔了。
初始化事件：我理解就是 vue 对象的事件模型的初始化对应的 api 就是 看这里。
调用 beforeCreated
provide + inject + 响应式初始化（我理解就是初始化依赖收集队列,挂上definePrototype的set/get）
调用 created 钩子
有 el 找 template，没 el 先挂起等对象调用$mount 再找 template
1、找 render 函数渲染，2、render 木有找 template 撸成 render 函数渲染，3、el 的 html 模板然后渲染，4、都木有？去死，上一步确保有了。
调用 beforeMount 钩子
渲染一波，然后把渲染后的元素赋值给 $el 并取代 el。
调mouted 钩子
监听数据改变然后对视图进行更新然后更新前后分别调用 beforeUpdate update 钩子；
当调用 distroy 进行销毁时，先调用 beforeDestory 钩子，然后对子组件、之前的收集的依赖、事件监听进行卸载。然后调用 destroy 的。
react 生命周期(结合尝试经验和这篇博客理解)
获取设置组件的 defaultProps 了改一哈；
constructor 里初始化 state,据说 createReactClass 写法里是 getInitialState 钩子（我没用过）。
// getInitinalState 还有一个用法，就是无论啥时候都能用它获取到初始状态的，试想你重置表单？ const a = this.getInitialState()
然后 willMouted + render + didMoutd
当父组件的props变化时 会调用 willRecevieProps(这里一度让我以为会存在 didRecevieProps，逼死强迫症啊)
当监听到 state 或者 props 发生变化（其实调用 setState 就会触发）的时候会调用 shouldComponentUpdate 钩子，根据返回值来确定是否需要重新调用 render；
当 shouldComponentUpdate 返回值为 true，调用 willUpdate 函数
当 shouldComponentUpdate 返回值为 false 啥也不干（皮一下真的很开心）
调用 render 函数
didUpdate
WillUnmount 组件被干掉前调用
总结一哈（一家之言）：
vue 的前戏比较足，准备充分，当数据变化引发的更新开销小，某条数据改变能够根据依赖搜集快速的定位局部构建 vdom ,进行视图更新，而且提供了大量的 api 方便 coder；
react 前戏比较快，直接进入主题，首次渲染比较快，但是数据更新处理就需要重新构建树然后遍历，shouldComponentUpdate可以做部分性能优化。
4、 大 API 和小 API同为渐进式框架，vue提供了大量的 API 对数据、视图去进行处理。
vue视图提供了一系列的指令控制视图，v-show、v-for、v-model...,react 的话都要通过自己display、map、onPrototypeChange...去实现
关于数据处理，vue 有 filter,computed 对数据进行监听过滤，react。。。
就此而言 vue 的 code 开销可能少一点。。
5、状态管理这里只比较 vuex 和 redux，说实话 redux 用的很不爽啊。
改变数据: redux 是通过 reduder 返回。这特么就意味修改我每修改一次，哪怕是 a.b.c 这种层级，就要返回整个 state，为了精简必须得拆，当返回是一个索引类型滴我们就需要 [...a] 或者 {...a}要不然根本不会触发组件内 props 改变。vuex 通过 mutation 直接赋值即可，当有新属性添加Vue.$set。
注入组件: react-redux 通过全局 Provider + 组件的 connect,通过 mapStateToProps + mapDispathToProps 将 state 和 dispatch 注入到组件的 props 中。vuex 是将 store 注入根节点，组件通过 $store 或者 mapxxx 进行访问。
数据筛选 : react 在 mapStateToProps 中处理， vuex 在 getter 上处理。
模块划分 : react 返回各个 reducer 然后 combine，vuex 是塞到 module 里。
6、生态web 方面，vue 官推全家桶，到目前为止，vue 的一些开源组件也是很丰富的目前都能满足我所接触的业务要求。react 生态...感觉更大，因为可选项太多了，拿动画来说 motion、animated、groupCssTransition...(ps:groupCssTransition处理路由过渡动画的时候，有个坑，我比如我想实现 a->b 页面是从右到左的特效，b->a是从左到右的特效会存在一个老坑，具体大家可以把RouterAnimation的childFactory去掉试试，不详述。)从这点来说 react 更加 渐进式 一点；
native 方面，记得去年看 weex，我连官方 demo 都没跑起来，不知道现在咋样；react native 没跑过，不过很多成功案例，加上最近出的泰罗奥特曼听上去棒棒哒。
微信小程序：wepy mpvue ??????我选择用原生主要是因为预览还要再开一个 ide 很不开心。
结emmmmmm....感觉有点帮助的点个赞吧。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95613.html
摘要：学习成本很低，另外官方有比较完善的中文文档。简单本身是没有错误，一个东西能以简单的方式解决难道不好吗关于这个中文文档居然还有人喷那些喜欢用的是不是英文能力差，我就再报以呵呵一笑。本身拥有中文文档就是一个优势，结果还成了被喷的地方。 前言 由于这段时间工作上也是挺忙的，就没有时间去写这个项目，中间一直都是写写停停，进度也是非常慢的。正好前几天都还比较空，就赶紧抓着空闲时间去写这个项目，最...
摘要：通过可以让识别列表长度变化自动更新列表，利用维护项数据可以使每个项保持响应式却互不影响，对长列表优化效果很明显。最好的方式是将数据统一放在中，子组件通过方式获取数据。 MobX 是一款十分优秀的状态管理库，不但书写简洁还非常高效。当然这是我在使用之后才体会到的，当初试水上车的主要原因是响应式，考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。 在...
摘要：在项目开始之前，不能心急立刻去搭建，需要设定几个步骤来开展，接下来大概的说一下我从技术选型到项目前端搭建好的整个生命周期。开发该项目的底层的内容远不止这些，但由于公司制度规定，只能大概的阐述了在从接手到选型到搭建完毕这到的过程的做法和思考。 前段时间部门要基于一个系统的基础上开发一个管理平台，于是我接手了该平台的重活，因为上一个平台我用了vue搭建，所以这次想用react来搭建。在项目...
摘要：市面上竟然拥有多个虚拟库。虚拟库，就是出来后的一种新式库，以虚拟与算法为核心，屏蔽操作，操作数据即操作视图。及其他虚拟库已经将虚拟的生成交由与处理了，因此不同点是，虚拟的结构与算法。因此虚拟库是分为两大派系算法派与拟态派。 去哪儿网迷你React是年初立项的新作品，在这前，去哪儿网已经深耕多年，拥有QRN（react-native的公司制定版），HY（基于React的hybird方案）...
阅读 2648·2021-11-19 11:30
阅读 2829·2021-11-15 11:39
阅读 1560·2021-08-03 14:03
阅读 1868·2019-08-30 14:18
阅读 1947·2019-08-30 11:16
阅读 1965·2019-08-29 17:23
阅读 2463·2019-08-28 18:06
阅读 2401·2019-08-26 12:22
