浅谈web三大框架优缺点及适用场景之React框架
书虫媛 2020-06-05
根据React官方介绍,React-A JavaScript library for building user interfaces,React 是一个为数据提供渲染为HTML视图的开源JavaScript库。从这个定义来看,可以发现React是一个View层,它的作用是提供了一套数据机制。
React是第一个采用Virtual DOM的、流行的前端框架。传统的DOM操作是直接在DOM上操作的,当需要修改一系列元素中的值时,就会直接对DOM进行操作。而采用Virtual DOM则会对需要修改的DOM进行比较(DIFF),从而只选择需要修改的部分。因此,对于不需要大量修改DOM的应用来说,采用Virtual DOM并不会有优势。
除了在编写应用时不需要对DOM进行直接操作、提高了应用的性能,React还有一个重要的思想即组件化,即UI中的每个组件都是独立封装的。并且,由于这些组件独立于HTML,所以它们不仅可以运行在浏览器里,还能作为原生应用的组件来运行。组件之间可通过属性和事件来进行通信。同时,在React中还引入了JSX模板,即在JS中编写模板,而且还需要使用ES6.
令人遗憾的是,React只是一个View层,它是为了优化DOM的操作而诞生的。为了完成一个完整的应用,我们还需要路由库、执行单向流库、web API调用库、测试库、依赖管理库等,这简直是一场噩梦。因此为了搭建出一个完整的React工程,我们还需要做大量的额外工作。
1.适用场景
选择React而不是别的框架还有一个重要的原因:React的思想不局限于前端领域,它还有React Native、React VR 等,它们可以在不同的平台之上运行类React的View层。使用与React语法类似的React Native,我们可以编写出原生的移动应用。此外,我们还可以在web应用程序与iOS、Android应用程序之间,共享大部分业务逻辑。
如阅文集团在其网站起点海外版中,采用了React对原有的应用进行重构。其原因是,由于之前的App部分采用Hybrid架构模式,因此便采用了React Native来解决性能问题。React Native不仅能解决开发上的性能瓶颈问题,还适合前端开发人员上手开发应用。
阿里巴巴的一些部门(如智能服务事业部)里采用React框架的主要原因是生态,其在公司内部已经有大量的与React相关的基础设施如Ant Design、Ant Design Pro、及Fusion等UI组件库。如Ant Design Pro则非常适合中台前端的解决方案设计。
与此同时,出现一些相关框架比如ReactXP,可以在共享逻辑的基础上实现跨多个目标平台共享视图定义、样式和动画、而不需要做出太多修改,进一步实现代码在原生应用于Web应用的复用。随着这项技术在不同平台如VR的发展,在遥远的未来也可以实现复用业务逻辑及View层。