天津h5模板建站,网站设计英文报告,深圳市建设工程监理协会网站,高校网站建设情况报告范文React是Web前端框架
1、目前市面上比较主流的前端框架
ReactAngular#xff08;NG框架#xff09;Vue
主流的思想#xff1a;
不在直接去操作DOM#xff0c;而是改为“数据驱动思想”
操作DOM思想#xff1a;
操作DOM比较消耗性能[主要原因就是#xff0c;可能会导…React是Web前端框架
1、目前市面上比较主流的前端框架
ReactAngularNG框架Vue
主流的思想
不在直接去操作DOM而是改为“数据驱动思想”
操作DOM思想
操作DOM比较消耗性能[主要原因就是可能会导致DOM重排回流/重绘]操作起来也相对麻烦一些
数据驱动思想
我们不会在直接操作DOM我们去操作数据[当我们修改了数据框架会按照相关的数据让页面重新渲染]框架底层实现视图的渲染也是基于操作DOM完成的。 构建了一套虚拟DOm - 真实DOM 的渲染体系 有效避免了DOm的重排/重绘开发效率更高、最后的性能也相对较好
stackoverflow
操作DOM的demo
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /meta nametheme-color content#000000 /metanamedescriptioncontentWeb site created using create-react-app/title操作DOM的demo/title/headbodyspan idtextBox0/spanbr /button idsubmit累加/buttonscript// 想操作谁先获取谁let textBox document.querySelector(#textBox),submit document.querySelector(#submit);// 事件绑定let num 0;submit.addEventListener(click, function () {num;textBox.innerHTML num;});/script/body
/html 2、React框架采用的是MVC体系Vue框架采用的是MVVM体系
MVCmodal数据层 view视图层 controller控制层
按照专业的语法去构建试图页面React中是基于jsx语法来构建视图的构建数据层但凡在视图中需要“动态”处理的获取需要变化的不论是样式还是内容我们都要有对应的数据模型控制层当我们在视图中或者根据业务需求进行某些操作的时候都是去修改相关的数据然后React框架会按照最新的数据重新渲染视图以此让用户看到最新的效果。
单项数据驱动数据驱动视图的渲染 视图中的表单内容改变想要修改数据需要开发者自己去写代码实现 “单向驱动”
MVVMmodal数据层 view视图层 viewModel数据/试图监听层
数据驱动视图的渲染修改数据视图会跟着更新试图驱动数据的更改监听页面中表单元素内容改变自动去修改相关的数据 “双向驱动”
