工科思维结合实际项目分析React 技术栈

文中内容意在帮忙本人梳理清楚 React 技术栈，不能保证正确。

非网络应用的实际项目

化腐朽为神奇，如何将食物垃圾变成营养丰富的化肥。
具体的步骤如下。
高温高压罐->粉碎机->离心机->包装机。全程自动化。
所有的同学看到这个步骤，心里应该有所理解了，那项目的表述就到此为止吧。

映射 React

首先把项目中的每一个部分对应网络中的一个页面。这里举例高温高压罐，高温高压罐分解后包含罐体，大门，门销等。每一部分都可以看成是 React 组件。而大门的打开和关闭认为是大门的状态(是名词而不是动词)，当然对应的就是 React 组件的 state 或 props 。为了感知大门的状态，在每个状态处安装了行程开关，行程开关的作用就是当大门到达打开状态会触碰它，行程开关置为 1，其他时间为 0 。与此类似设置其他状态。高温高压罐作为一个非智能的物体，正好映射了 React 所关注的 View 层次。

实际项目的提示，将网络页面分解成若干组件，分析每个组件的状态，给出 state 。这里应该列出状态的表格。

映射 Redux

在实际项目中每个部分的状态转换都有一个部件来控制，通常在工业中我们使用 plc (可编程逻辑控制部件)。plc 拥有输入和输出引脚，plc 每个输出引脚的排列组合，就是当前所有部分的状态，而输入引脚就是行程开关所赋值的，输出引脚是根据输入引脚的赋值而发生变化的。因此这里可以认为行程开关就是 action ，是引发状态改变的唯一来源。plc 中的逻辑就是 reducer，是改变状态的唯一方法。而 plc 本身就是 store 。这里所有部分都是通过 plc 获取当前状态，类似于直接通过 context 获取，在网络应用实现的方法就是 React-Rudex 的 connect 。

这里需要提到的是 plc 的编程遵循并行运算，非常巧合的映射了 setState 的异步逻辑。

提示，根据实际项目的操作，给出有限状态自动机。

副作用

有时除了 plc 运算之外，还需要加若干其他模块。如无线模块，DA/AD 转换模块等。在网络应用中我们也要处理异步操作这样的副作用。Redux-saga 统一了副作用处理规范，将副作用的处理模块化。

映射 Router

在实际部分中进行转化，我们使用的是轨道小车。小车位于哪一部分完全由该部分的行程开关的状态来决定。比如小车从高温高压罐到达粉碎机，此时高温高压罐的大门状态应该是打开状态，而粉碎机应该设置一个小车到达的行程开关。那这些中间环节的行程开关，可以看成是路由的状态，对应的是 React-Router 的 match 对象。

从实际项目中获取的提示，列出每一个中间环节的行程开关，结合具体流程给出路由。