React入门

来源:互联网 发布:淘宝宝贝详情优化 编辑:程序博客网 时间:2024/05/22 04:46

       我们正处在一个Web前端技术变革的时代。为了适应前端的技术变革,对性能要求越来越高,在这种情况下React应运而生。React起源于Facebook的内部项目,该公司尝试引入HTML5技术用于架设instagram网站,但是过程中发现,对于复杂前端,HTML5的性能下降明显,达不到预期效果,经过对市场上JavaScriptMVC框架的调研后,觉得都不能满足他们的需求,他们就自己开发了一套框架,React由此诞生。

       React有三个特点:

       1.操作虚拟DOM

       对于JavaScript,他的机制是操作DOM节点,需要根据数据生成DOM,然后渲染到浏览器上,这样频繁的操作DOM是非常耗费性能的,为了解决这一问题,React引入了虚拟DOM机制,数据变化时React会将虚拟DOM局部的更新到浏览器DOM中,每次数据变化,React都会扫描虚拟DOM树,对比上一次的虚拟DOM树,然后将变化的地方局部更新到浏览器DOM中,虚拟DOM属于内存数据,所以操作很快,由此提高了性能!React是如何对比的?这不需要我们知道,数据变化时React自动高效的完成对比,它是如何局部更新到浏览器DOM的?这也不需要我们考虑,他同样会高效的为我们完成。我们只需要考虑数据的状态即可!

      2.组件化

      忙里偷闲,最近看了一本《REACT:引领未来的用户界面开发框架》,刚开始看真是云里雾里,看完之后发现React的实现非常的简洁,组件即封装起来的具有独立功能的,可复用的UI部件,一个整个的UI,我们就可以看成是一个个小的组件构成的一个大的组件。对于React组件又具有三个特征,可组合性,可重用性,可复用性。

     3.单向数据流

     接触过AngularJs和KnockoutJs的读者都知道其有一个特点是双向数据绑定,React与这两项技术不同,设计者考虑到双向数据绑定虽然很便捷,但当应用场景复杂的时候副作用也是相当的明显,有舍才有得, 综合之后设计者采用了单向数据流,从父节点传递到子节点,如果顶层组件的Prop改变了,React会递归的向下寻找虚拟DOM树上的所有使用该Prop的组件。当然,如果在某些情况下需要使用双向数据绑定也是可以的,可以通过ReactLink进行扩展,但是不建议使用。

      React与React Native的区别:

      刚开始在网上寻找React资料的时候总是伴随着有React Native的搜索结果,作为Web前端开发技术,React可以做Web端和app,而React Native只支持app端,还不支持Web端的访问。

      总结:

      在开发中使用javascript操作Dom节点的方法如果和后台交互一般使用Ajax方法请求后台数据,然后将数据绑定到对应Dom上渲染到浏览器页面上,在开发中小编也是亲自体验到了使用React和简单操作Dom两种开发方式的性能区别,效果非常明显,用户体验度也大大的提高,本篇只是作为一个入门,简单了解一下React的起源与优点。下篇将会记录一些Demo,帮助我们更好的理解React的用法!

     资料推荐:

     官网:https://facebook.github.io/react/

     博客学习:《阮一峰网络日志

        中文学习网站:http://www.runoob.com/react/react-tutorial.html

        书籍推荐:《REACT:引领未来的用户界面开发框架》《React前端技术与工程实践》