锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / React
技术分类
插件
动画
双向绑定
类名操作
测试工具集
组建的生命周期
生命周期方法
实例化
存在期
销毁期&反模式
数据流
props
propTypes
getDefaultProps
state
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883

简介


React是UI组件开发思路。配合jsx将组件不在写在html页面而是script中。它可配合Jquery,Backbone等等第三方库来使用,仅仅是将我们平常写的组件开发思路变了一下。曾经我想写一个组件,第一个思路就是写在jq的插件中。但是这种第三方插件的写法效率低下,虽然功能可能都可以实现,但是复杂,尤其是嵌套组件时,那将是个噩梦。React的出现给组件开发带来了革命性的创新。 

它具备以下特性:

  • 不是一个MVC框架
  • 不使用模板
  • 响应式更新非常简单
  • HTML5仅仅是个开始
  • 设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单

发展历史


React来自Facebook,于2013年开源。至今不断修改完善,现在已经到达了版本0.14.2。可以注意到版本还没有到1.0, 普遍应用到大部分产品中还需要一定的时间。2015年3月份,FaceBook发布了React Native,一个用react来构建native app的框架。

React的背景和原理


在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

小结


react是Facebook开发出来用于促进UI交互,创建带有状态的,可复用的UI组建的UI库!Feacebook的产品广泛运用这技术,Instagram.com(一款图片分享应用)基于react开发出来的。(这里的理解难点在于 带有状态的,可复用的UI组件。也就是一个UI组件,它带有状态属性,并且可重复使用!)

react的最大的卖点就是,react不仅可以在浏览器端使用,还可以在服务端使用,还可以两端一起使用!

react的底层的概念:react运用的是Virtual DOM(虚拟DOM),然后根据UI组件的状态变化,有选择的渲染DOM的节点树!它尽可能的操作最少的DOM来更新UI组件。

React 的问世把前段开发人员从复杂的数据交互和 UI 渲染不可预测的问题中解放出来,让开发人员可以将精力专注于数据的变化上。于此同时,React 运用虚拟 DOM 技术,极大的提升了页面的性能。而且,它通过对模块的划分,让应用的逻辑和数据流更加清晰明了。

1. 许多人使用React作为MVC架构的V层。尽管React并没有假设过你的其余技术栈,但它仍可以作为一个小特征轻易地在已有项目中使用。 

2. React为了更高超的性能而使用虚拟DOM作为其不同的实现。它同时也可以由服务端Node.js渲染——而不需要过重的浏览器DOM支持。 

3. React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 

4. React组件通过一个render()方法,接受输入的参数并返回展示的对象。除了接受输入数据(通过this.props),组件还可以保持内部状态数据(通过this.state)。 

5. 通过使用props和state,我们可以组合构建一个小型的Todo程序。React是灵活的,并且提供方法允许你跟其他库和框架对接。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内