浅谈慕课网React入门课程笔记（一）

阳光穿透心脏的1/2处 2022-06-16 10:14 215阅读 0赞

本文介绍React的优势和应用场景。

React——颠覆式前端UI开发框架

传统方式将来自于服务器或用户输入的交互数据动态反映到复杂界面上时，代码量变得越来越大，越来越难以维护。

基于此，先是谷歌推出自己的前端开发框架Angular，将对DOM的直接操作释放，通过relative来实现复杂的DOM修改。但Angular存在一些问题，如：其整体作为一个MVVM框架显得过重，不适用于对性能要求比较高的站点，如移动端的Web站点；其UI组件的封装相对复杂，不利于重用。而React另辟蹊径得解决了这些问题。

React的特点：

①　React不是一个完整的MVC、MVVM框架，其只负责View。React的设计团队不认为MVC的开发模式仍适用于某些场景下的开发，所以才有了围绕React的一系列理念，如Class、router。

②　React只负责View，但React与Web Components不冲突，完全可以用React去实现一个真正意义上的Web Component。

③　React不同的设计理念决定了React比Angular轻得多。

④　React实现的原理是virtual DOM机制，virtual DOM以及数据单向数据绑定使得React的渲染、响应非常快。virtual DOM带来的不仅仅是性能上的提升，更重要的是其背后所蕴含的思想——组件化的开发思路。组件，就是封装起来具有独立功能的UI控件。React推崇的是用组件的方式去重新思考UI的构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或嵌套的方式最终构成一个大的组件，完成整体UI的构建，这就意味着它是高度可重用的。

React的应用场景：

①　业务需求在复杂场景下还有着高性能要求，如：图片画廊的应用——所有图片分布在画廊上，有一张焦点图片位于正中间，随意点击任意一张图片，其获得焦点，剩下的图片重新分配位置，点击处于焦点处的图片可以翻转到其背面的介绍，同时底部也有导航条，可以翻转当前图片和切换焦点图片。

②　组件是高度可重用的，如图片画廊中导航条的单个元素以及单个图片都可以自成一个组件，维护开发都将变得异常容易。

学习React需要提前掌握的前置知识：

①　有一定的JS、CSS基础。

②　了解Sass和Compass。

③　对前端自动化方案有所了解，如Yeoman、Gulp、Webpack。

④　对CommonJS规范略知一二，最好写过NodeJS。

⑤　会用Git、Github。