[toc] ## 書寫流程 ``` - 服務端 - api層獲取數據 -------------- - action-types - reducer - action - 組件中調用action 一個頁面一個reducer ``` ## target和eventTarget區別 ``` console.log(e.currentTarget); //這個事件函數給誰綁定的 console.log(e.target); //源頭，點擊時的目標 console.log(e.target.dataset.type); //元素的是元素身上data-type的值 ``` ## 工程相關 ### 插件配置時可以省略前綴 配置插件時 不用加前面的`babel-plugin`plugin字樣的前綴 ``` { "presets": ["es2015","stage-0","react"] ,"plugins": ["transform-decorators-legacy"] } ``` ### 圖片必須import 圖片必須要import 才會被打包 ``` import logo from '../../common/images/logo.png' .... <img src={logo} alt="" /> ``` ``` import './style.css'; let oImg = new Image(); oImg.src = './1.png'; //不會打包 document.body.appendChild(oImg); //--- ---- 以上為錯誤示范 --- ---- let oImg = new Image(); import png from './1.png'; //如果引入了圖片 就可以把圖片進行打包，其中png不是圖片本身，而是文件的路徑 oImg.src = png; //不會打包 document.body.appendChild(oImg); ``` ## withRouter 只有**直接**`<Route path="..." component={} >`中`component`屬性選中的組件才有`history`屬性，它的子孫組件并沒有這個屬性， 而往往我們是需要在其子組件才會使用`this.props.history.push(...)`，那么要怎么破呢？ 這就需要使用到`withRouter`來了 首先要在使用history的子組件中引入 ``` import {withRouter} from 'react-router-dom'; ``` 接著在導出組件時用`withRouter`包一下 ``` export default withRouter(Header); ``` ## config-overrides.js 與 按需加載antd react-create-app 現在支持以`override`的形式而非彈出配置的形式更改webpack配置 ``` const {injectBabelPlugin} = require('react-app-rewired'); const rewireLess = require('react-app-rewire-less'); module.exports = function(config,env){ //向原來的webpack配置的babel插件列表中增加一個插件，按需導入。babel-plugin-import(沒有添加前綴 babel-plugin) // 比如babel-plugin-abc 就只需要 injectbabelPlugin(['abc'],...) config = injectBabelPlugin(['import',{libraryName:'antd',style:true}],config); //增加了對less的loader支持 config = rewireLess.withLoaderOptions({ modifyVars:{"@primary-color":"#1DA57A"} })(config,env); return config; //最后啟動拿這個返回值來啟動 }; ``` 然后在package.json中更改腳本配置 ``` "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-app-rewired eject" }, ```