ReactJS学习笔记 (一)前言

Thu 03 January 2019 / In categories Web

ReactJS

ReactJS学习笔记系列。

Model View Controller

传统的GUI程序一般采用MVC结构,也就是Model(模式)-View(视图)-Controller(控制)的结构来处理数据流。之所以采用这种结构,大概是因为对于计算机来说,数据是存储是由存储器负责,而数据的显示则是由图形界面负责,跟这两种硬件打交道需要不同类型的逻辑,所以把这些逻辑归类为Model(负责存储)和View(负责显示)是一种很自然的归类法。在Model和View之间传递消息和数据流的、起桥梁作用的逻辑则称为Controller。

简单的说:

  • Model: 数据是在何处,以及以何种方式存储,以何种方式更新
  • View:数据是以何种方式,何种姿态显示的,如何相应交互事件
  • Control:更新的数据是如何从Model传递到View,对数据的改动要求又是如何从View传递到Model的

对于MVC而言,最容易实现组件化的是View。试想以下,你需要给用户显示一个文本框(TextBox),这个文本框是虚线边框,并且里面的文字是粗体显示的。面向对象语言中,你可以把这个文本框用一个的类表示,这个类带有一个方法loadText(),用来加载需要显示的文本。然后你可以同时实例化多个文本框,第一个文本框从内存获取文本,第二个文本框从硬盘读取文本,第三个文本框从网络获取文本。对于每种获取文本的操作,我们可以简单写一个函数来实现,或许用不着区分什么Model或者Controller。

但是View需要保持交互性,如果像上面的例子中的第三个文本框那样,需要从网络获取文本,那么这个操作会有很长的延时,在这期间这个文本框会对用户失去响应,导致交互性降低,丧失用户体验。一个办法是把这种时延性高的操作采取异步处理,这时候就很需要一个Controller,以便对逻辑进行解耦合。

MVC、React和浏览器

对于Web浏览器这种GUI程序而言,你可以说它的View是浏览器实现的,浏览器负责最终的渲染,以及提供交互支持。浏览器把它的界面能力通过HTML这种文本标记语言释放给Web程序。一个Web应用由浏览器和Web程序共同完成,对于浏览器而言,HTML是输入数据,是生成View的依据;而对于Web程序而言,HTML是输出数据,是它要生成的内容。

让情况变得更复杂的是,HTML里面通常混杂有用于控制样式的CSS,和用于控制逻辑的JavaScript。所以实际上,Web程序需要输出的是视图、数据、逻辑的结合体。而不是像传统的MVC程序那样,视图归View、数据归Model、逻辑归Controller。

React的意义就是通过JavaScript在HTML上加一层抽象层,帮助Web程序把视图功能从之前的混杂的HTML代码中抽取出来,形成组件,从而实现复用。也就是说,React为Web程序提供了MVC框架中的的View框架。

(本篇完)

Load Disqus Comments