[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" }, ```