React项目前端开发总结

此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享!

1. 使用技术

react＋react-router + react-redux + antd

2. 请求方法封装

调用方法：

3. 配置打包生产环境与测试环境

4. 按需加载

首先在webpack中配置，主要需要配置 chunkFilename 这个属性，其它的顺便提一下。

path：输出的文件存放的文件夹，此处address通过打包的命令生成，__driname为当前文件所在的目录的绝对路径。

publicPath：处理静态资源引用地址，比如在CSS中引用了图片，打包后默认情况是url（文件名），这样必须确保资源文件和CSS处于同一目录，如果希望打包引用地址改为img目录下的资源，就需要用这个参数。

filename：编译生成的js文件路径，可在前面加上文件夹名，如果没有会自动创建。

chunkFilename：用webpack内置的require.ensure方法引入的模块打包后的文件名，如果该方法中没有引入任何模块，则不会生成任何chunk块文件．

Version：打包时JS文件生成的时间戳，禁止缓存。

在需要分包加载的组件中使用require.ensure方法。

require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])。

dependencies：依赖的模块数组。

callback：回调函数，该函数调用时会传一个require参数，可以进一步的require其他模块。

chunkName：模块名，用于构建时生成文件时命名使用。

require.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。

require(‘./rankingList/orderDetails’).default中require方法的参数不能使用变量，只能使用字符串。

如果组件是使用ES5的module.exports导出的话，那么只需要require(‘./rankingList/orderDetails’)即可，而如果组件使用ES6的 export  default 导出的话，那么需要加上default。

如果在路由页面使用了按需加载加载路由级组件的方式，那么在其他地方就不要再import了，否则不会打包生成chunk文件。

5. 跨级组件之间的通信

首先定义公共事件对象event.js。

在需要传递数据的组件multiMedia.js引入公共事件对象。

组件multiMedia.js传递数据时。

在需要接收数据的组件Editor.js中引入公共事件对象。

在Editor.js的生命周期挂载完成后，调用监听事件。

在Editor.js中定义事件newMedia接收数据。

在Editor.js的生命周期将要卸载时，移除监听事件。

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

7. 瀑布流插件Macy的使用

npm安装macy后引入该插件。

初始化macy插件。

指定页面上需要加载瀑布流布局的容器，ID与初始化里面的ID一样。

在请求数据完成后，setState的回调方法里调用声明的方法。

实现滚动加载。

实现效果如下：

8. 表格插件Echarts使用

引入Echarts插件。

重要的三个步骤，封装成一个方法，方便在数据改变时调用它。

上图步骤２中不同的表格类型配置不一样。

8.1. 饼图的配置；

主要的展示数据为series里的data。

最终效果如下：

 8.2. 折线图的配置；

主要的展示数据为series里的data。

最终效果如下：

 如果想在缩放屏幕时让图表自适应，可以加个监听事件，记得在组件将要卸载时移除事件。

9. 编辑器UEditor的使用

首先，引入编辑器文件。

然后，在componentDidMount生命周期里初始化编辑器。

上图自定义this.createOnUeReady()的方法里面执行要添加开关，保证只执行一次回调，避免多次触发事件。

最后，在组件卸载时销毁编辑器。

正常加载所功能的编辑器如下：

 本项目中常用的编辑器指令如下：

1. 清空内容；

2. 插入内容；

3. 获取编辑器的内容；

4. 设置编辑器的内容；

5. 设置编辑器不可编辑；

6. 设置编辑器可以编辑；

你可能觉得工具条上的功能有点多，实际不需要那么多，可以对工具条进行配置，打开刚开始引入的ueditor.config文件，里面有一系列的配置选项，如下所示：

toolbars: [[ 'anchor', //锚点 'undo', //撤销 'redo', //重做 'bold', //加粗 'indent', //首行缩进 'snapscreen', //截图 'italic', //斜体 'underline', //下划线 'strikethrough', //删除线 'subscript', //下标 'fontborder', //字符边框 'superscript', //上标 'formatmatch', //格式刷 'source', //源代码 'blockquote', //引用 'pasteplain', //纯文本粘贴模式 'selectall', //全选 'print', //打印 'preview', //预览 'horizontal', //分隔线 'removeformat', //清除格式 'time', //时间 'date', //日期 'unlink', //取消链接 'insertrow', //前插入行 'insertcol', //前插入列 'mergeright', //右合并单元格 'mergedown', //下合并单元格 'deleterow', //删除行 'deletecol', //删除列 'splittorows', //拆分成行 'splittocols', //拆分成列 'splittocells', //完全拆分单元格 'deletecaption', //删除表格标题 'inserttitle', //插入标题 'mergecells', //合并多个单元格 'deletetable', //删除表格 'cleardoc', //清空文档 'insertparagraphbeforetable', //"表格前插入行" 'insertcode', //代码语言 'fontfamily', //字体 'fontsize', //字号 'paragraph', //段落格式 'simpleupload', //单图上传 'insertimage', //多图上传 'edittable', //表格属性 'edittd', //单元格属性 'link', //超链接 'emotion', //表情 'spechars', //特殊字符 'searchreplace', //查询替换 'map', //Baidu地图 'gmap', //Google地图 'insertvideo', //视频 'help', //帮助 'justifyleft', //居左对齐 'justifyright', //居右对齐 'justifycenter', //居中对齐 'justifyjustify', //两端对齐 'forecolor', //字体颜色 'backcolor', //背景色 'insertorderedlist', //有序列表 'insertunorderedlist', //无序列表 'fullscreen', //全屏 'directionalityltr', //从左向右输入 'directionalityrtl', //从右向左输入 'rowspacingtop', //段前距 'rowspacingbottom', //段后距 'pagebreak', //分页 'insertframe', //插入Iframe 'imagenone', //默认 'imageleft', //左浮动 'imageright', //右浮动 'attachment', //附件 'imagecenter', //居中 'wordimage', //图片转存 'lineheight', //行间距 'edittip ', //编辑提示 'customstyle', //自定义标题 'autotypeset', //自动排版 'webapp', //百度应用 'touppercase', //字母大写 'tolowercase', //字母小写 'background', //背景 'template', //模板 'scrawl', //涂鸦 'music', //音乐 'inserttable', //插入表格 'drafts', // 从草稿箱加载 'charts', // 图表 ]]

对于不需要的工具将其注释掉即可，多个工具如果要用中划线分开可以在上面的数组中加上 “|”。

其他一些重要的配置，与toolbars同级放置。

上图中whiteList为最重要的配置选项，通过配置该选项，可以将一些标签或是一些标签的属性加入白名单，防止被过滤。

需要特别注意的是，使用了ueditor后，一定要在webpack中添加插件配置，这样打包过后才能将ueditor添加到打包文件里面去。

10. 图片裁剪插件react-cropper的使用

11. 前端项目工程化与模块化的心得

1. 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系）；

2. 目录结构定义（比如通用的config文件，不能藏的太深）；

3. 制定项目开发规范（ESLint规范）；

4. 模块化（小颗粒度的，如表格中的分页）、组件化（粗颗粒度的，如表格）；

5. 前后端的接口规范（比如loading控制，错误拦截处理，code码代表的含义，系统级的错误、业务型的错误码，交互型的错误）；

6. 性能优化、自动化布署（压缩、合并、打包）；