Press "Enter" to skip to content

Author: 建文

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

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

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

JS语言是不是面向对象的?(一)

我计划要写两篇文章。第一篇,阐述JS语言是不是面向对象的,和JS是否支持工程模块化;第二篇,讲一种阅读React源码项目的技术

第一篇,阐述的步骤

  • 1 为什么要面向对象,
  • 2 面向对象的标准特征是什么,
  • 3 JS有没有,以及如何实现这个特征。

同样,

  • 1 为啥要模块化,
  • 2 什么是模块化,
  • 3 以及JS如何做的

怎么阅读一个React SPA WGP源码项目(研究片断)

# 为啥研究源码阅读的技术?

1 读懂是模仿,和创作的前提基础,就像一般人都能阅读文章,但写不出文章,阅读比写作更基础。

2 写文章标志扎实的掌握最近学到的知识和技术

3 阅读的技术,其实对WGP理论和开发技术的掌握程度的检测,和考证

4 阅读(学习)源码,模仿源码(维护项目),和创作(开启新项目),是三种能力水平

React Context API是什么以及基本使用

React Context API 是 针对所谓 状态管理(state management)[em] 而设计的API。 Context API 以一种更直接有效的方式解决了早期使用 props 来处理嵌套UI的状态共享的问题。

EM:单一的V只有状态,没有状态管理,状态管理只有在复合的Vx组件中才有。

那什么是 状态管理呢? Context API 优于props的地方在哪里呢?Context API 又如何使用呢?

本文摘译自《React Context API: Using React Context with APIs effectively》。

UI状态管理技术

实际应用中的React 程序,它的交互UI都是复杂的,有着复杂的嵌套层次关系,这些嵌套的UI组件都需 共享中间计算数据(状态),甚至是计算功能(函数)来实现交互功能。

目前有三种 实现共享中间计算数据 的技术:

第一,是组件的模板参数 props。这个方法最大的优点是直观,缺点是当组件层次较复杂时没有针对性,计算不相关的组件可能会看这个props。还有一个问题,就是props形式参数,它不是用来“通信”共享数据的,有可能螺丝刀当锤子用(待证);

React 两个基础的组件设计模式

今年(2020)我围绕着一个很关心的主题花了很多时间,它就是程序结构设计师(常叫架构师),有了相当多的结论,其中除了对这个专业(基础技术和职责)有了更深的认识外,还在其基础上,上升到对整个软件项目中四个专业(功能,结构,开发和管理)有了新认识。然而,实际的项目实践中,我们大部分的工作,它性质其实都是开发,而不是结构设计。因为优秀的结构设计已经集成在各种库和应用框架之中,我们拿来即用,除非我有能耐,可以对像React这样的框架进行调优,为社区作出贡献,否则,作为一名日常的开发者,他的大部分价值,都体现在技术开发。

所以,如果有一个发展方向的问题,基础方向(至少当下)是SPA技术开发者,而不应该是WGP结构设计师,那可以是一更远的方向,以当下的方向为基础。

作为技术开发者,它的专业任务可概括为,对由设计师提供的结构设计案进行分析,结合SPA理论,设计出某种具体的代码实现方案。作为React 技术发开者,他可选的技术,是React 各种API,例如函数组件和类组件API。

我们可以从任务的方向发现React 技术发开者的需要专业技能。其中一种任务是复合的交互UI(Vx)。对一个经验丰富的React 开发者,他应该知道日常中开发任务,是针对某个交互功能进行组件分割。最困难的设计任务,是选择合适的组件,以满足项目代码可维护性,可扩展性等质量要求。

组件设计的模式是React 技术发开者的专业技能,本文介始了最基本两个组件设计模式。本文略译自《Component Composition in React 》。

如何用React Hook开发带状态的SPA V组件

把WEB UI分立为一个个带状态的 V,是一个概念革命,因为开发者工作时看到的变量语句函数,就像建筑工人上班时看到的是水泥沙石钢筋,这是一种低层次的作业水平。

把SPA看成一个个V,就像把建筑看一个个独立的生活空间,而不是水泥钢筋。所以学习造V 和Vx,就像学习造生活空间。我们工作处理的是水泥钢筋,变量语句,心中指引我们的,是生活空间,和V逻辑。

EM:把一座大厦建筑比较一个SPA,大厦的「功能空间」比作会话,具体「生活空间」比作会话步骤,是非常相似的。

前一文,我们学习了如何使用React 提供的最基本的 V制作工具—— Component 基类——制作带状态的V组件(主要使用 Component.setState API),本文将介绍React 最新V制作技术——Hook来 完成同一个任务。本文部分内容摘自《How To Manage State with Hooks on React Components》。

如何用React的 Components Class 开发带状态的SPA V组件

把WEB UI分立为一个个带状态的 V,这是一个概念革命,因为早期的WEB开发是一堆 HTML DOM CSS JS技术概念的零散组合。V 不是一定要有状态的,但是有状态的V才是完整的,不带状态只是它的一种特例。

本文就是讲 如何用React开发SPA V组件,只是重点介绍的是「V的INTEL形式属性」的实现技术。V组件有状态,和复合V的需要状态管理,是两个任务;V组件形式 有状态属性,是,使用多个基础V制作复杂的V,对复杂V进行状态管理的基础。

本文略译自《How To Manage State on React Class Components》,作者:Joe Morgan

Introduction

在一个程序里(React 程序),状态(state)是指程序在运行过程中的某个特定的数据或数据结构[em1]。状态管理的技巧 是开发应用程序(包括React程序)的重要技能,因为很多 高级交互功能 需要复杂的状态数据。状态(state)的概念是宽泛的,既可指表单控件(inputs)的输入值,也可指系统API的动态参数。本教程,我们将学习通过「React 类组件」管理交互状态,或者说学习管理「React 类组件」的交互状态[em2]

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(下)

前一课小结SPA理论和工作前提,现在开始本课正题——多页网站改造为单页应用(MPA的SPA改造)。

根据前面的理论的指引,我们的改造概略以下几点:

  • 第一,将网页(或部分交互功能)转换为JS view对象,「界面渲染」 转到前端(使用JS 动态操作DOM);
  • 第二,创建全局的JS router对象,负责应用会话导航,将 「会话路由」 转到前端;
  • 第三,创建一个app的对象,表征应用程序主体,管理(初始化)前两个对象;

我们再看看这个常规完整的SPA体系结构图:

服务端交换和 Model都不是必须,本课简单交互功能不需这些组件。

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(上)

截至上一版本的项目实验,我们实例项目(a-wgp)的项目功能、构建系统和版本跟踪系统 都有了基本的构造,包括:

  • 第一,项目功能 是 一个简单的动态交互页;
  • 第二,构建系统丰富了build和start 构建任务的功能;
  • 第三,理顺了版本跟踪流程,包括本地私有分支、公共分支和远程库分支的管理;

这些基础功能构造,足以满足一个 由多人协作的中小型动态网站项目 的开发。接着这一版本我们将它转换SPA,一种最基础的SPA程序构造。

单页应用程序(SPA)形式理论及React应用一般结构

作为「前端开发者」或「Web应用设计师」,对 单页应用程序(SPA)的形式[注]和逻辑结构[注]有特别细致的了解 是他的专业基础。这些基础知识,有助于作为「开发者」精确的 对(设计方案上的)某种功能设计 进行技术实现,也有助于作为「设计师」更专业的将用户需求转化具体的容易技术实现的设计方案。

注:根据被认识的主体不同(矿物和生物),形式有静态属性,和动态规律,两种;程序是种被动弱智生命;

注:逻辑结构就是质料结构(构造)

「设计案」是设计师和开发者沟通的中间媒体,「设计案」全称构造设计案,Web应用程序(WGP)的构造设计案是对项目需求文档的技术具体,是对程序源码的逻辑概述。WGP构造设计案异常的重要,其制作(由设计师)和使用(由开发者)都是以WGP理论为基础的,是它的一种应用。

然,这里有个疑问,形式理论如何为「设计案」的基础呢?原因为,「某物理论」可指导认识和制造「某物」,以及「某物」的逻辑模型,逻辑模型就是设计案,算是某物成型的半成品。 「某物理论」可指导可举一个简单的例子,例如,GP界面程序的MVC结构模式,构件关系和构件逻辑都是基于GP理论的。

单页应用程序 发展有一段时间,然而纯粹的完整的 SPA理论[注],我还没有读到过。本文参考《Master React 2016》的部分与SPA理论相关的内容,我以为还不错,在其基础上丰富一下。