（本文略译自《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。

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

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

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

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

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

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

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

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形式参数，它不是用来“通信”共享数据的，有可能螺丝刀当锤子用（待证）；

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

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

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

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

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

把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》。

把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]。