美文网首页
工科思维结合实际项目分析React 技术栈

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

作者: wlszouc | 来源:发表于2017-07-18 12:54 被阅读0次

    文中内容意在帮忙本人梳理清楚 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 对象。

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

    相关文章

      网友评论

          本文标题:工科思维结合实际项目分析React 技术栈

          本文链接:https://www.haomeiwen.com/subject/vqthkxtx.html