【ReactJS】尝试理解React新的前端思维方式
来源:互联网 发布:刻章软件下载 编辑:程序博客网 时间:2024/05/14 18:18
要了解一样东西的特点,最好的方法当然是拿这个东西和另一样东西作比较。我们就拿React和jQuery来比较。
jQuery:是一个JavaScript 的库,借鉴了结合CSS简化和精简了JavaScript的操作方式和解决浏览器兼容问题。选中一些DOM元素,然后对这些元素做一些操作,这是一种最容易理解的开发模式。但当业务逻辑复杂的时候,每行代码都会有不知所云的感觉。
React:是一个JavaScript的框架,React利用声明式的语法,让开发者专注于描述用户界面“显示成什么样子”,而不是重复思考“如何去显示”,这样可以大大提高开发效率,也让代码更加容易管理。虽然React是通过重复渲染来实现动态更新效果,但是借助Virtual DOM技术,实际上这个过程并不牵涉太多的DOM操作,所以渲染效率更高。React的主要理念之一就是基于组件来开发应用。
jQuery 与 React 的区别:
Q:在同一个区域将JS还有HTML混在一起写,不是说是一种坏的风格吗?
A:对于简单的页面而言,这样写可能会是一种坏的风格,但是对于大型的网页应用就不一定了。在大型的网页应用中,会有成百上千的UI,每一个UI都包含他自己的标签以及行为。对于每一个UI而言,如果标签还有事件行为放在一起,会更加利于维护。React就是设计用来制作大型的网页应用。众所周知的,React是全球最大的网页应用公司FaceBook开源并且使用的。
作为软件设计的通则,组件的划分要满足高内聚和低耦合的原则。
高内聚 指的是把逻辑紧密相关的内容放在一个组件中。用户界面无外乎内容、交互行为和样式。传统上,内容由HTML表示,交互行为放在JavaScript代码文件中,样式放在CSS文件中定义。这虽然满足一个功能模块的需要,却要放在三个不同的文件中,这其实不满足高内聚的原则。React却不是这样,展示内容的JSX、定义行为的JavaScript代码,甚至定义样式的CSS,都可以放在一个JavaScript文件中,因为它们本来就是为了实现一个目的而存在的,所以说React天生具有高内聚的特点。
低耦合 指的是不同组件之间的依赖关系要尽量弱化,也就是每个组件要尽量独立。保持整个系统的低耦合度,需要对系统中的功能有充分的认识,然后根据功能点划分模块,让不同的组件去实现不同的功能,这个功夫还在开发者身上,不过,React组件的对外接口非常规范,方便开发者设计低耦合的系统。
React是在什么历史背景下产生的?
最初AngularJS使用了MVC(模型-视图-控制器)模式构建,然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构。React却是另一方面,它的关注点只在MVC模型的”V”上 – 它被设计用来展现数据,而将其他方面交由应用架构中编程人员选择的其他组件负责。
虽然Facebook最初也是用MVC这种框架,但是,Facebook的工程部门逐渐发现,对于非常巨大的代码库和庞大的组织,按照他们的原话就是“MVC真的很快就变得非常复杂”。每当工程师想要增加一个新的功能时,对代码的修改很容易引入新的bug,因为不同模块之间的依赖关系让系统变得“脆弱而且不可预测”。对于刚刚加入团队的新手,更是举步维艰,因为不知道修改代码会造成什么样的后果。如果要保险,就会发现寸步难移;如果放手去干,有可能引发很多bug。
React和MVC思想的框架不同,每个组件独立封装,功能独立,我们只需关心自己部分的逻辑。与单一功能原则相同:独立的组件应该只做一件事情。
前后端MVC框架渲染有何区别?
MVC框架提出的数据流很理想,用户请求先到达Controller中,由Controller调用Model获得数据,然后把数据交给View,但是,在实际框架实现中,总是允许View和Model可以直接通信,越来越多的同行发现,在MVC中让View和Model直接对话就是灾难。
服务器端MVC框架往往就是每个请求就只在Controller-Model-View三者之间走一圈,结果就返回给浏览器去渲染或者其他处理了,然后这个请求生命周期的Controller-Model-View就可以回收销毁了,这是一个严格意义的单向数据流;对于浏览器端的MVC框架,存在用户的交互处理,界面渲染出来之后,Model和View依然存在于浏览器中,这时候就会诱惑开发者为了简便,让现存的Model与View直接对话。
React的Virtual DOM
传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作,提供了一种不同的而又强大的方式来更新DOM,代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM,就是React抽象出来的一个对象,描述dom应该什么样子的,应该如何呈现。通过这个Virtual DOM去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。
为什么通过这多一层的Virtual DOM操作就能更快呢? 这是因为React有个diff算法,更新Virtual DOM并不保证马上影响真实的DOM,React会等到事件循环结束,然后利用这个diff算法,通过当前新的dom表述与之前的作比较,计算出最小的步骤更新真实的DOM。
虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。
如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。
React 为了更高超的性能而使用虚拟 DOM 作为其不同的实现。 它同时也可以由服务端 Node.js 渲染 - 而不需要过重的浏览器 DOM 支持。
- 【ReactJS】尝试理解React新的前端思维方式
- 尝试打破思维枷锁的新习惯
- 尝试一种新的带人方式
- 尝试一种新的带人方式
- More than React(一)为什么ReactJS不适合复杂交互的前端项目?
- 【前端】从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 新的时代,换种思维方式
- 用新的思维方式去解决问题
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs
- ReactJs和React Native的那些事
- React实战-ReactJS+Redux的思考
- react开发思维方式入门
- Kotlin+Anko 你应该尝试的新Android开发方式
- Unrecognized Windows Sockets error
- C#参数传递:值传递和引用传递
- 深入浅出解析Android事件传递机制
- [知了堂学习笔记]_Js中的函数
- spring boot注解实现参数校验
- 【ReactJS】尝试理解React新的前端思维方式
- JavaScript学习- Math(算数)对象
- 欢迎使用CSDN-markdown编辑器
- Linux服务器编程——Linux系统编程之进程通信
- 分段函数
- spring cloud-Swagger2整合Eureka,实现Eureka页面自动跳转到Swagger2UI界面查看服务接口信息
- Python基石
- 用Python实现常见机器学习算法(二)
- MATLAB相机标定的使用并导出XML文件