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框架。

（本篇完）