[一步一步学react系列] 04—计算器Demo

前言：
之前的例子都是写的计数器，加一减一的功能，我们大致弄懂了redux分层和store数据管理，下面我们将结合现有知识写一个终极版的计算器。以此巩固所学知识
知识点：redux分层，react-router，一些算法及数据结构知识[栈 + 中缀转后缀]

首段祭出源码地址：
github：https://github.com/EmilyYoung71415/LearnReactDemo

效果图

项目结构

├──redux-demo/                 * 计算器Demo
      |
      |————src/                * 主程序
            │
            ├─Components       * 所有组件 
            │  ├─Calculator    * 计算器
            │  ├─Counter       * 计数器 
            │  └─StudyDemos    * 学习的一些有帮助的demo 
            │      └─备份文件夹 * 笔记 等我写完博客就清 
            ├─Error            * 错误组件 
            ├─Redux            * Redux 
            │  ├─Action
            │  ├─Containers
            │  ├─Reducer
            │  └─Store
            ├─Router           * 路由
            └─Style            * 所有样式变量 

为了便于初学者如我上手，我没有将分层的各个功能部件写在不同的文件下，而是采用了先写在一起然后分成多个文件的策略。如下是我的计算器代码，并没有加路由。
思路是：
1.布局：按钮值是数组，循环数组值生成按钮，一个函数监听所有的点击事件。flex布局，固定每行几个块。
2.确定当前实例中拥有的所有数据，接下来在这些数据中找出应该是state的数据。
即：在当前实例[计算器]中的所有数据，确定哪些是本组件内部管理的无需存到store上的数据。
也就是确定props数据与state数据。
props数据与state数据划分遵循三原则：
1. 是否是通过父级props传来的，如果是则可能不是state
2. 会随时间推移而不变吗？ 如果是则可能不是state
3. 你能根据组件中其他任何的state或者props计算出他吗？如果能,则可能不是state

由上推理:

• 等号及等号前的数据: 通过用户的输入而来 会随时间推移而变 state
• 等号后的数据: 能够计算得出
• 按钮的值: 来源于父级props层层传递而来

综上我们可以得到属于本组件state状态的数据是：等号及等号前的数据
而每次计算的结果我们则存到redux的store里。即结果来源于props。
关于结果：
我们对应一个方法和一个参数

• 方法：等于符号的点击 equalClick => 负责向外分发action
• 参数： revdata 结果值 =>继承自strore，this.props.revdata

难点解说： http://www.xiexianbo.xin/wordpress/?p=519

源码解读：