尝试总结SPA V理论解释 React 技术

陆续不断学习React有一阵子了，但对于React 作为一支View库工具，它的技术（工具）特性和和针对的任务都还没有达到一种通透的控制感。这里边，我想除了项目实践经验不多，主要还是我对有关V（SPA V）的理论的不成熟。翻了下研究路经，其实在一个多月前已经对V理论有了相当的归纳：

这里的研究还停留在逻辑的抽象分析，并没有结合React API，对React的工具特性进行解释。最近对React的实际开发任务（包括VV功能制作，和VV功能复用）有了更多的经验，可以进一步推进它了。

React 应用技术交叉了多层基础

React是新一代的前端框架，代表当下最前沿的前端开发范式。精通React技术是不容易的，因为理解和掌握 React需要很多基础，而这些基础技术中有好一些还在发展之中（形成成熟的理论），它们包括：

• 第一个基础，是 Virtual View；
• 第二个基础，是View 对象 和SPA；
• 第三个是，浏览器DOM，和JS；
• 第四个是，程序（对象）理论；

越往下越基础，简单讲下它们之间的关系：

1. React 是设计用来制作 VV 的工具，与第一代的框架（像Backbone）制作的V相对；
2. VV 是一个View，继承V的逻辑属性，V是SPA中重要的一个逻辑组件（还有 A R M等组件）；
3. V或Vx 是一个 混合的DOM封装对象；DOM操作，与事件监听API是制作 V 的 基础；
4. React是一个JS库，V是以一个特殊的JS对象实现的；
5. JS对象需要程序理论解释，解释对象是什么，有什么计算功能；

这里边，认识 V的形式和结构原理（一种V理论） ，是重中之重，而React API，是一个好实例，用来归纳V理论；有了V理论，反过来也会更好认识React本身的设计 [em] 。

然而，这里边存在一个悖论，就是我们（作为初学的）对V的形式掌握的不多，不足以指导认识 React的API；反过来，我们也没有很多使用 React API的经验，作为一个实例去归纳 V理论。此情只有一个种策略，就是反复迭代，在理论和实践之间来回猜想和验证。

EM：这里又有一个关于「任务和技术」关系的实例，V是任务也是存在，可以用来认识React技术和工具的设计；

# V 对象形式猜想

V或Vx 是一个 混合的DOM控制或制作的封装对象，负责实现与用户交互的计算功能；

V的 具体交互功能种类 是很多的，但它提供的交互功能“强度”只有几大类：

• 第一，只有交互输出，并且是静态；像一些只有内容呈现性质的辅助性交互UI；
• 第二，有交互输出，也有输入，但无记忆智能；像一个加法计算器UI；
• 第三，以上三个都有；像一个开关按键UI；
• 第四，上面三是V，Vx则由一个以上V复合而成（例如有多个交互输入输出——多个事件处理函数）；像一个“用户中心”的交互页；

以上算是对V对象形式属性的一个初步结论。

# React 的V对象制作工具API分析

理论上， 每一种类 V 对象 ，都有一种特定的工具（特性或功能）为制作它而设计，这样开发效率比较高，事实上React也是这样设计的。那，React设计了什么样特定工具，这需要深入分析。

React 制作V对象的工具API包含了一系列的概念和编程构件—— R元素 、R函数、 R类组件，以JSX等语法技术：

1. R元素 制作只有辅助交互输出的V，静态；
2. R函数 制作 通用V的模板，但没有智能状态：R函数直接方便的制作没有状态智能的V实例；
3. R类组件 制作 通用V模板，有交互处理，有状态
   • R类组件的生命事件勾子（lifecycle methods.）是制作动态V的重要API
4. R hook函数对象 一种轻便的R组件实例制作新技术，替代R类组件技术

以上只是流行的认识，还需要进一步，分析归类，总结。

# R元素与R组件

元素和组件的概念比较迷惑；因为React 有一个核心的React.Component类，好像手动R元素和R函数就不是组件；其实，R组件 就是SPA 逻辑V在React上的实现，就是VV，概略是指交互页上一个交互功能区域单元；R组件 用来在ReactDOM上渲染（ReactDOM.render上的第一个参数）。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(element, document.getElementById('root'));

R元素是VDOM上节点，相对H元素是DOM上的节点。

R元素与R组件，概念上有时候可互换；当我们讨论JSX构建时，讨论节点结构组成时更多会说「元素」，形式整体的场合则更爱「组件」。

##R组件与R组件类（Component类）

都知道React 有一个核心的React.Component类，它与逻辑上的R组件（VV）是不同的，Component类是制作 全能VV 的一个代码模板（JS类），下面会介绍。

## R组件由R元素由组成

R组件由一个以上R元素组成；R元素可使用 React.createElement手动创建或JSX声明定义的；

例如：

const element = ( <h1 className="greeting">Hello, world!</h1>);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

## R组件用作JSX自定义元素

JSX支持两大类R元素：内置和自定义。支持自定义元素，让JSX表达层次化UI的强大力量；

React.createElement创建的只能是系统内置的元素，例如<div><h1>；但是JSX除了可以声明式创建内置元素，也可以以声明方式创建自定义元素，例如：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <div />;
const element = <Welcome name="Sara" />;

# R组件模板

R组件（VV）在应用大都会重复出现，需要代码模板制作，提高代码复用率；

R函数组件模板

以JS函数的形式制作静态的 R组件，将R组件 可定制的形式属性 抽象成函数参数，用来派生不同实例；不支持交互输入，没有智能状态；只能用来制作第一类 V对象；

技术上，R函数是 返回R元素 的一种JS函数，接任意自定义的V对象props。

R类组件模板

以JS 类的形式制作全能的 R组件，输入输出，状态和效应都支持，四类V对象都可以，当然如果是第一类，就没必要使用类了。

技术形式上，R组件类是由一个具有约定结构的JS类实现，结构包括：

第一，类构造器，负责关联父原型，处理组件模板参数，初始组件状态，绑定交互输入事件等；

第二，0+以上的事件处理函数的定义；这里处理VV的交互输入；

第三，0+以上的对象生命事件勾子定义；这里管理VV的环境效应；

第四，必选实现的render方法；render方法的职责类似于R函数，是 返回R元素的，构建一个R组件形式 ；但由于支持制作全能的 R组件，render方法内的 R元素除了可以渲染交互输出（输出可以来自状态，而不仅仅模板参数），创建自定义元素，也可定义交互输入事件，例如onClick。

R Hook 函数组件模板

Hooks 是最新的潮流，为开发者提了新自动化抽象；Hooks 可以很方便的简易的制作各类VV；Hook表面上是个函数，实质是一个特殊的JS对象。Hook技术，不但能用来 制作VV，也也能实现 组件复用。关于 React Hooks技术，看我前一篇文章，而关于 组件复用，可能会另立一文。