一、創(chuàng)建react項目髓涯，引入相關(guān)依賴包
關(guān)鍵文件夾及文件：
config：全局配置文件夾（config.js）
node_modules：依賴包文件夾
public：公共文件夾（首頁index.html：提供一個應(yīng)用根DOM）
src：項目模塊文件夾
????????assets： 公用資源（css袒啼、img）
????????components 非路由組件
? ? ? ? containers：模塊容器文件夾
????????utils 工具模塊(api.js：封裝的api工具模塊)
index.js： 入口js文件
navs.js：側(cè)邊欄配置文件
routes.js：路由配置文件
在src/index.js里面把頁面渲染到根DOM里面，而渲染的內(nèi)容從src/containers/Index.js里面生成纬纪。
下面以report為例：React 是一個聲明式蚓再，高效且靈活的用于構(gòu)建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短包各、獨立的代碼片段組合成復(fù)雜的 UI 界面摘仅，這些代碼片段被稱作“組件”。而我們上面的代碼中就使用了這種模式问畅。
由路由配置文件可知娃属，我們進入首頁后，會默認渲染app容器的內(nèi)容护姆，當(dāng)我們訪問localhost:3000/report時矾端，會去Report容器中調(diào)用report方法，即需要在容器中將report方法導(dǎo)出签则，給外部使用,同樣在report方法中 也使用了BasicTale組件及ConfigProvider組件须床，還使用了國際化漢化組件zhCN铐料。
BasicTable組件：主要頁面渲染渐裂，同時還引入了一些ant design系統(tǒng)組件和自定義組件，? TypeList組件：自定義類型下拉組件? ?TimeList組件：自定義時間范圍組件钠惩。
在組件類中初始化數(shù)據(jù)篓跛，定義公共方法膝捞，渲染數(shù)據(jù)頁面。
這里主要講幾個關(guān)鍵點：1愧沟、子組件向父組件傳值? ? 2蔬咬、setState異步問題? ? 3鲤遥、樹形數(shù)據(jù)顯示? ?4、數(shù)據(jù)綁定 監(jiān)聽
1 林艘、父組件寫一個監(jiān)聽子組件的方法盖奈，方法回調(diào)中獲取組件的值，在子組件中onChange事件中 調(diào)用父級組件的監(jiān)聽方法狐援，父組件使用子組件是钢坦，自動監(jiān)聽。
父組件啥酱，通過timeValue監(jiān)聽子組件的getTimeValue 屬性爹凹，即實現(xiàn)子組件向父組件傳值。
2镶殷、在setState時禾酱，由于這個方法是異步執(zhí)行的，如果馬上去獲取setState的值绘趋，會出現(xiàn)宇植，還是原來的值，這就需要在setState的回調(diào)中去使用埋心。
3、table樹形子級拷呆，在點擊切換子級時闲坎，好像并不會自動隱藏另一個子級，所以需要優(yōu)化下(可能也是我沒有找到)茬斧。
通過分析腰懂，我們可以知道展開是在onExpand考驗監(jiān)聽到的，并且通過expandedRowKeys的值项秉，控制展開行的绣溜，我們只要監(jiān)聽動態(tài)的改變這個值，就可以實現(xiàn)展開隱藏的優(yōu)化了娄蔼。
當(dāng)我們點擊觸發(fā)展開隱藏操作時怖喻，會傳遞兩個參數(shù)，expanded:展開還是隱藏的狀態(tài)值岁诉，record:當(dāng)前點擊的記錄對象锚沸，我們首先設(shè)置記錄的展開的key值的數(shù)組為空，當(dāng)狀態(tài)為展開時涕癣，把當(dāng)前的key值存到臨時數(shù)組中哗蜈，并將當(dāng)前展開的值賦值給state里面的我們自定義的記錄值expandedKey，而我們在table中通過監(jiān)聽這個值得變化，來控制行的展開隱藏距潘，就實現(xiàn)了我們的優(yōu)化炼列。這個函數(shù)還做了個優(yōu)化，就是當(dāng)點擊的是父級音比，并且操作時展開時唯鸭，才會去重新獲取子集數(shù)據(jù)并重新渲染data值(默認獲取父級數(shù)據(jù)時，子級數(shù)據(jù)都不獲取硅确，即children為空數(shù)組)目溉。
4、數(shù)據(jù)監(jiān)聽綁定菱农，就是當(dāng)我們改變state里面的值時缭付，會相應(yīng)的改變監(jiān)聽綁定相關(guān)值的渲染
即我們代碼中 對相應(yīng)需要監(jiān)聽綁定的值做了定義，當(dāng)我們改變這個值的時候循未，數(shù)據(jù)會根據(jù)改變的值重新渲染陷猫，而當(dāng)我們獲取數(shù)據(jù)的時候，也可以重置這些值的妖。
最終效果
