# action.js中常用方法簡介
說明:data.js為json格式易于開發人員理解,data.js為dom結構以及數據結構的描述文件。
#### 1、meta結構簡述
1、默認從name為root開始,通常是header、content、footer的結構

image.png
如圖實例:name為名稱標識符,component為其引用組件名稱(根據組件來定義dom展示元素),className為元素的class名兒(根據它在less.js文件進行樣式優化),children字面意思理解為子集元素。
###### 注:root的className盡量與app名稱保持一直或自行定義規則,便于區分。因為項目在webpack進行打包的時候會將所有的less文件打包到一起,啟動項目時一次加載提升性能;如果app名稱混淆會給后續優化頁面展示以及代碼維護產生大量的額外工作量。
2、關于function、大致有兩種寫法如下圖:

image.png
第一種根據$符來定義方法(推薦)邏輯在action.js中編寫;
第二種直接根據參數來用sf方法更新data(不推薦,IE兼容性不好(箭頭函數它不認識),如果項目將來支持IE瀏覽器只能返工改寫成第一種形式);
3、關于組件的選取以及組件的屬性用法建議到ant.design官網自行查詢,選中左側組件可以查看演示效果,拉到最底部有屬性API供讀者查詢 鏈接:[https://ant.design/docs/react/introduce-cn](https://links.jianshu.com/go?to=https%3A%2F%2Fant.design%2Fdocs%2Freact%2Fintroduce-cn)
- 序言
- 環境搭建
- node環境安裝
- npm國內源切換
- git知識學習
- git安裝
- git基本操作
- gitSSH配置
- vscode安裝使用
- 安裝
- git使用
- 前端開發環境
- 安裝腳手架及創建頁面
- 框架源碼目錄結構
- 相關API
- 項目啟動
- 如何運行
- 如何兼容到IE8
- 啟動參數說明
- IE8環境下兼容總結
- 注意的效率問題
- 框架亮點
- 相關技術棧介紹
- 功能強大的UI組件庫
- 數據驅動視圖
- 通用的公共類庫
- 組件視圖生成器
- 嵌入第三方站點
- 簡單易用-react
- 簡單易用-redux
- 1分鐘入門示例(hello world)
- 高級概念
- 入門概念
- 高級概念-1
- 前后端聯調
- 其它常用場景
- 詳細介紹(action、data、reducer)
- action.js
- data.js
- reducer.js
- 進階
- Mock數據
- 引入第三方插件
- 模塊拆分
- iframe接入
- 頁面模型生成器
- webpack@3升級到4.x
- 生產部署
- 生產打包
- nginx部署
- tomcat部署
- hbuilder打包部署
- nodejs部署
- docker部署
- 常見問題
- 兼容IE8
- 自動升級
- 貢獻模板
- 瀏覽器支持統計
- 前端調試
- 注意事項(重要)
- 內存泄漏
- JavaScript內存那點事