1.使用技术:react+react-router + react-redux + antd
2.请求方法封装
LET_IMAGE_SHOW='http://www.xxx.com/url?id='
4. 配置打包生产环境与测试环境
//npm run build:test 用于打包测试环境
//npm run build:prod 用于打包生产环境
5. webpack + react-router 按需加载
首先在webpack中配置,主要需要配置 chunkFilename 这个属性,其它的顺便提一下
path:输出的文件存放的文件夹,此处address通过打包的命令生成,__driname为当前文件所在的目录的绝对路径
publicPath:处理静态资源引用地址,比如在CSS中引用了图片,打包后默认情况是url(文件名),这样必须确保资源文件和CSS处于同一目录,如果希望打包引用地址改为img目录下的资源,就需要用这个参数.
filename:编译生成的js文件路径,可在前面加上文件夹名,如果没有会自动创建.
chunkFilename:用webpack内置的require.ensure方法引入的模块打包后的文件名,如果该方法中没有引入任何模块,则不会生成任何chunk块文件.
Version:打包时JS文件生成的时间戳,禁止缓存
const Version = new Date().getTime()
在需要分包加载的组件中使用require.ensure方法
6. Redux状态管理
在大型项目中,react中的组件嵌套及跨级是非常频繁的,而react的数据本身是单向数据流,这样组件之间传递数据非常麻烦,Redux最主要是用作应用状态的管理,用于实现多级组件之前的数据共享.
首先创建数据仓库store
在项目入口文件index.js中传入store
当组件需要修改store里的数据时必须要派发action
action有两个特定参数,一个为type,为action的名称,一个为payload,即需要传递的数据
在需要修改数据的组件banDetail.js中引入action
在需要修改数据的组件banDetail.js中通过connect让addOpenActiveMenu这个action方法与当前组件做链接
在banDetail.js调用方法
定义reducer,处理store接收到的新数据
当reducer把处理过后的数据返回到store里后,同上面action的链接方法一样,让state与store做链接,就可以在组件里通过this.props.title获取store里的数据了,title即为store里的数据.
return时如果要返回异步数据,可以通过redux-thunk和redux-saga这两个中间件来实现,这样就可以以action中发起异步请求了.