第二章:认识React组件

在Web开发中,我们总是需要将数据的变化实时反映在UI上,这时就需要对DOM进行操作,大家都知道复杂和频繁的DOM操作是Web应用的性能瓶颈原因之一,如何高性能的操作DOM,这是一个考验前端开发者技能重要的指标。

React引入了虚拟DOM(Virtual DOM)来解决这个问题。用React开发的Web应用,看起来是整体都刷新了,其实在局部如何高性能的更新界面,React框架帮助我们做了很多事情。

阅读它,来了解React如何进行Diff比对,并更新界面。

其实,待我看完React的文档之后,就让我联想到了很久很久之前的Web开发。服务端根据数据Render出一个完整的页面,然后响应给浏览器,如果用户在浏览器上进行了某些操作,改变了数据,服务器并不知道改变了哪些HTML,所以需要再根据变化的数据Render出一个完整的页面,再响应给浏览器。

React在编程思路上,还引入了一切皆组件的原则,可能在一个页面中,会存在headerfootercontent三个区域,React会认为,这个页面由三个组件来组成,也许content又分为navlist,于是content组件又由navlist来组成。由小组件装载到大组件,再由大组件装载成一个Web页面。

看来组件是一个恒久的话题,经典的MVC结构可以让Web页面做到视图-数据-控制器的分离,开发者需要从技术的角度来将UI进行分离,比如将HTML碎片看做是视图,将请求看做是模型,将连接模型与视图的连接点看做是控制器,而组件化的方式可以让UI更加的抽象与模块化,React的设计思路就是需要开发者从功能的角度,将UI分成不同的组件,每一个组件都是独立封装,拥有自己的生命周期。

15.0的变化

  • 15.0开始不在支持IE8
  • 移除了部分API,比如batchedUpdates
  • 移动了原React中的API到ReactDOM中,比如findDOMNode,如果你使用的是0.14版本会得到一个警告
  • 修复了大量的bug

访问:Blog | React 来获取更详细的信息。

使用ES2015

官方文档给出的信息属于ES5,如果你需要查看ES2015来编写React组件,你需要阅读这篇文章。

访问:React Components,Elements and Instances

results matching ""

    No results matching ""