文中内容意在帮忙本人梳理清楚 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 对象。
从实际项目中获取的提示,列出每一个中间环节的行程开关,结合具体流程给出路由。
网友评论