Reactjs开发基础

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中发起异步请求了．