React+Ant Design Pro初学

       最近因为工作原因看了一些前端框架的知识，之前没太接触过这方面的内容，所以有点凌乱，梳理一下写篇文章记录一下，文中的很多链接都是直接导向对应位置的，挺适合初学者，我引用了定义，但是括号里也写了一些自己的理解，应该没事哈。希望自己能多学习多实践，感谢各位在网络上的各种提问，回答，总结！

       菜鸟教程：https://www.runoob.com/react/react-tutorial.html

       React生命周期：https://www.jianshu.com/p/46022f1cbbb3

       Ant Design Pro简介：https://pro.ant.design/docs/getting-started-cn

    一.初步理解：

       1.React(菜鸟教程):

       (1).声明式设计 −React采用声明范式，可以轻松描述应用。（通过将前台需要显示的对应元素定义出来，并且通过其对应属性和方法的方式标记其显示的方式和动作，每一个元素也可以定义为一个组件，而在每一个组件中又可以使用基本页面元素定义组件属性和内部框架和组织结构）

       (2).高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。（基本上不需要进行前台DOM的操作，而是通过属性便可以达到对应的效果）

       (3).灵活 −React可以与已知的库或框架很好地配合。

       (4).JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。（在开发过程中可以使用常规的js进行页面的整合，也可以使用jsx进行页面的整合，示例中多为jsx页面，在使用上没有太多的区别）

       (5).组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（可以通过将相同的元素或方法抽离的方式进行组件的复用，在不同的页面上引入即可 import {*} from *。可见在import时除了对应的模块需要引入外，还可以引入本地文件或本地组件，路径方式标记为“@/”的均为本地路径，也可以使用“./”标识上一级目录）

       (6).单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。（在React中每一个页面都可以有一个对应的state，而这个state可以传递到下一个页面或组件中，同时可以通过使用动态props将父组件的数据传递到子组件的时候，并且如果父组件的数据发生变化，子组件的数据会随之发生变化）

        (7).数据传输和路由 − 除了上述特点外，React在针对Restful方式的数据传输也很合理，并且在针对不同路由地址的可以通过request的对应路径进行路由配置。

        (8). React生命周期 − 在constractor阶段可以设置组件的初始化状态，除此之外还可以对外部引入的JS或CSS进行对应的定义。componentDidMount阶段在组件已经被渲染后触发，那么可以做页面元素的事件绑定或者某些变更。

       2.Ant Design Pro(Ant Design Pro简介):

       (1).目录结构：

             ├── config # 在config文件夹中是全局配置，包含路由，构建等配置

             │ └──config.js # 在config文件中主要配置的是页面中每一个url对应的路径，权限信息，显示名称等

             │ └──proxy.js # 在proxy文件中主要配置的是后端数据源的url信息，可以是代理也可以是后端对应数据地址

             ├── mock # mock文件夹中的内容是在安装ANTD时提供的简单的本地模拟数据

             ├── public # 在public文件夹中存在的是全局可访问的内容，如图标，某些标准化的JS等

             │ └── favicon.png # Favicon

             ├── src # src文件夹中是真实开发时常用的文件夹，一般所有的页面显示内容及组件都定义在其中

             │ ├── assets # 本地静态资源

             │ ├── components # 业务通用组件

             │ ├── e2e # 集成测试用例

             │ ├── layouts # 通用布局

             │ ├── models # 全局 dva model

             │ ├── pages # 业务页面入口和常用模板，该文件夹内文件一般对应config文件中的url路径，如我们在config中写component: './show/test'，便可以理解为路径为/pages/show/test.jsx

             │ ├── services # 后台接口服务，该文件夹内文件一般对应pages文件中的业务逻辑及对应的路径，这样只需要在页面中引入对应的service即可

             │ ├── utils # 工具库

             │ ├── locales # 国际化资源

             │ ├── global.less # 全局样式

             │ └── global.ts # 全局 JS

             ├── tests # 测试工具

             ├── README.md

             └── package.json #  包信息，可以直接在其中书写对应的dependencies，也可以直接在项目所在的文件夹>git bash>cnpm install *

       3.React+ANTD：

              个人理解：在代码编写中要注意React的组件特性，不存在的组件可以通过组合的方式创建，并且React提供的单向响应数据流要合理利用，可以在constractor阶段进行this.state的定义，而后在下级组件中使用props进行上级数据的接收，另外，constructor阶段由于是在页面初始化之前就会进行操作，故如我想引入一个外部的echarts.js，便可以将该JS文件放在public文件夹中，而后通过创建script元素的方式将其引入。此时该页面还未进行渲染，所以可以在页面初始化时就引入，而后页面就可以用其对应的元素或属性就行页面渲染。另外，在每一次想要使用前端DOM解决问题时，可以先考虑是否可以通过数据传输流解决。