初识React的一些感受

新公司的后台管理用了React技术栈。小程序维护告一段落后，马上给了我一个后台任务。之前对React的了解基本只有名字，这次带着需求，看文档，看代码，写代码，因为有vue基础，上手还是蛮快的，两周内终于按时搞定了，对React也多了一些了解，在这里简单记录一下。

因为是先看了Vue再看React，不可避免的会把他们放在一起进行比较。由于现在对于React的了解不够深入，所以比较得出的大多数结论都是Vue更胜一筹，姑且先记下来:

• 相比Vue，React的使用JSX在render函数里边写模板，看惯了Vue代码再看JSX真的觉得非常丑陋，html标签，组件标签和js，变量混在一起，并且大量的地方使用三元表达式，很乱很不优雅。
• 相比Vue，React的组件的代码很不整洁，比如每次都要写的super(props);，再比如事件处理时类似this.handleClick = this.handleClick.bind(this);这种代码，虽然有相应的第三方包autobind-decorator来做简化，但相比Vue基本隐藏了所有与业务逻辑无关的细节，React在这些地方的处理还是有点莫名其妙，每个组件都要写重复且对使用者来说无意义的代码，很不友好。
• 另外，React官方不推荐使用继承，而是用组合的方式共用组件。个人一时间觉得不太习惯，但是仔细考虑了两者之间的区别之后，得出了下边的结论：
  
  • 混合vs继承
  • 当你有一个组件a，又要弄一个跟他80%相似的组件b时：
  • 混合：把那80%抽离出来做成通用组件x，剩下不同的20%分别传入通用组件，生成需要的a,b组件
  • 继承：b继承自a,然后把不同的那20%在b里边重写覆盖掉。或者把那80%抽离出来写成公共组件x，让a,b分别继承x
  • 由此可见，所为混合，我认为只是继承思路的子集，只是强制要求把公用的部分抽离出来。而继承则不强制要求，如果只有两处，a直接继承b自然最简单，但如果有3处或更多，写一个公共的x组件也未尝不是一个好方式。说到底组合和继承并无太大区别。

在Vue的基础上了解React，主要还是框架思想上的比较，比如Vue的computed,filter,directive等功能，都能更方便开发人员，api的使用也更加简单无门槛。但是主体思路，Vue确实借鉴了很多React的思想，Vuex和Reduce也大同小异。Vue毕竟是站在巨人的肩膀上，自然体验好很多。但React仍然是热度最高，社区最活跃的前端框架，认真学习理解还是很有好处的。