Press "Enter" to skip to content

Month: September 2020

React 开发中的代码复用技术:继承、构成、装饰和混入

(本文略译自《 Reusable Code In React: Inheritance, Composition, Decorators and Mixins》)

React 是我用过的最好用的UI库,如果你能突破传统旧Web开发观念,并熟悉了 React 的观念和开发模式一定会同意我的看法。好用的最主要原因,是 React 支持数种 代码复用 技术。本文将介绍 React 如何支持 四种代码复用技术,我们以一个计数器(counter)UI作为例子讲解。

Inheritance

继承或类继承 是 传统面向对象构造术 的最主要 代码复用技术。对于像 有Java 背景的人来说,继承是非常熟悉的,但是对JS开发者来说,则是相对陌生一点。类继承技术的特征是,对 某既有的类 进行功能扩充,包括数据或方法[em]

React refs使用指南

(本文略译自《A guide to React refs: useRef and createRef》)

本文,我们将探究React的一个设计——全面抽象封装了DOM的操作,又开了一个小门给开发者直接操作DOM。

作为新的第二代UI库,React将DOM的操作进行抽象封装,引入了一种新的开发模式——SPA由一个个带状态的 View组件 组成,开发者将 交互功能 理解成 View的状态的变更 的结果[em],这个观念改变是突变的。

EM:View的状态(state)或形式(props)变更都会触发重渲染,都会产生 某种交互输出的效果(交互功能的实现),但性质完成不同。从名字上就可以看出来,一个是交互计算(state),一个交互辅助(props),例如用props去初化一个新子V,会产生交互输出的效果,但不是交互计算。

当我们习惯了这个新模式后会发现,过往的同样的任务(开发交互功能),使用View组件在 分析设计和实现 上都比较原来 DOM命中模式 更好。

不过,React团队非常的有远见,就像其它代码库作者一样,想到了:为特殊情况开一后门(逃生门),这扇“逃生门”就是 Refs。

尝试总结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形式参数,它不是用来“通信”共享数据的,有可能螺丝刀当锤子用(待证);