React 构成理解
2016-04-01 10:24
393 查看
一、React不遵循MVC框架
二、 虚拟DOM机制
Web开发中需要将实时变化的数据反映在UI上,频繁的DOM操作对性能影响较大。React为此引进了虚拟DOM机制,在浏览器用JavaScript实现了一套DOM API。每当数据变化时React会重新构造DOM树,然后将当前DOM树与上一个进行对比,仅仅修改变化的部分。而且React能够批处理变化元素,尽管每次都要重新构造虚拟的DOM树,但是由于在内存中完成,因此性能较高。因此开发者就只需要关注在数据状态的变化下整个界面是如何渲染,而不需要关注每个元素是如何变化的。
总而言之就是传统的Web开发在更新页面信息时需要刷新整个页面,而react则只需要局部更新元素即可。
三、组件化
虚拟DOM也带来了组件化的开发思想,将有独立功能的UI部件封装起来,将每个功能相对独立的模块定义成组件
四、 环境
可以将React的语法直接写在HTML页面中,使用babel标记标明类型,然后引入script包将其转化为真正的js语言在浏览器上运行。但是这一步时间较长,一般在服务器上完成,将写好的jsx代码使用webpack打包,并在打包时使用jsx-loader将其转化为js文件,直接引入前端文件。
另外React支持ES6语法,可以使用class,extend ,super等关键字定义类。
参考http://www.cocoachina.com/webapp/20150721/12692.html
二、 虚拟DOM机制
Web开发中需要将实时变化的数据反映在UI上,频繁的DOM操作对性能影响较大。React为此引进了虚拟DOM机制,在浏览器用JavaScript实现了一套DOM API。每当数据变化时React会重新构造DOM树,然后将当前DOM树与上一个进行对比,仅仅修改变化的部分。而且React能够批处理变化元素,尽管每次都要重新构造虚拟的DOM树,但是由于在内存中完成,因此性能较高。因此开发者就只需要关注在数据状态的变化下整个界面是如何渲染,而不需要关注每个元素是如何变化的。
总而言之就是传统的Web开发在更新页面信息时需要刷新整个页面,而react则只需要局部更新元素即可。
三、组件化
虚拟DOM也带来了组件化的开发思想,将有独立功能的UI部件封装起来,将每个功能相对独立的模块定义成组件
四、 环境
可以将React的语法直接写在HTML页面中,使用babel标记标明类型,然后引入script包将其转化为真正的js语言在浏览器上运行。但是这一步时间较长,一般在服务器上完成,将写好的jsx代码使用webpack打包,并在打包时使用jsx-loader将其转化为js文件,直接引入前端文件。
另外React支持ES6语法,可以使用class,extend ,super等关键字定义类。
参考http://www.cocoachina.com/webapp/20150721/12692.html
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享