浅谈web三大框架优缺点及适用场景之React框架

Posted 2020-12-07

根据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层。