React开发过程中踩过的一些坑

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),解决

推荐阅读更多精彩内容