1.项目中多个自定义多个component时，通常都有相应的.js和.css文件，由于webpack打包后所有css样式都放在一个文件比如说bundle.js，因此要特别注意css样式冲突导致界面显示失控，比方在模块A的css文件写了类选择器.logo并设置了样式，然后在B模块又同样写了.logo，会导致样式层叠从而相互影响，复制拷贝样式时要尤其注意选择器影响问题
2.react-router-dom，一级路由或者经过手动点击跳转都没问题，但是多级路由路径在浏览器刷新后得到404，仔细一看路由地址变成网络restful请求了如下图
一路手动点击跳转ok，刷新就gg
找了很多资料，有说修改BrowserRouter为HashRouter，但是尼玛没啥用，又检查webpack配置文件devServer里historyApiFallback设置也ok的，之后修改index.html里bundle.js的引入路径，./bundle.js和/bundle.js都试过，都不起作用呀，仔细分析bundle.js是webpack打包后放到output设置的文件夹里，会不会是这里路径出了问题，再次查看webpack配置文件，output选项
里面，publicPath并没有设置，只设置了path，仔细一看两者区别：
path：是所有输出文件的目标路径，打包后文件在硬盘中的存储位置，仅仅告诉Webpack结果存储在哪里；
publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分，被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值
解决办法：设置publicPath为： '/'
3.react, 给组件的钩子函数componentDidMount添加事件监听addEventListener，在卸载组件钩子里componentWillUnmount进行removeEventListener，发现removeEventListener不起作用，查资料发现相同事件绑定和解除，需要使用共用函数，共用函数不能带参数而我这里用了f.bind(this),果断去掉后面的bind(this)，又发现没了this后代码达不到预期效果，最后在组件构造方法里加上this.f=this.f.bind(this),解决
网友评论