初识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仍然是热度最高,社区最活跃的前端框架,认真学习理解还是很有好处的。

猜你喜欢

转载自blog.csdn.net/Creabine/article/details/80528139