最近因爲工作原因看了一些前端框架的知識，之前沒太接觸過這方面的內容，所以有點凌亂，梳理一下寫篇文章記錄一下，文中的很多鏈接都是直接導向對應位置的，挺適合初學者，我引用了定義，但是括號裏也寫了一些自己的理解，應該沒事哈。希望自己能多學習多實踐，感謝各位在網絡上的各種提問，回答，總結！
菜鳥教程：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解決問題時，可以先考慮是否可以通過數據傳輸流解決。