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

微信扫一扫,分享到朋友圈

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

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

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

Table of Contents

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技术,看我前一篇文章,而关于 组件复用,可能会另立一文。

微信扫一扫,分享到朋友圈

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

body下的position到底相对于谁定位?

上一篇

如何让致病菌无法黏在你身上,做到真正消除感染?

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友