react项目中遇到的坑

1,touchStart和touchEnd

如果touchstart和touchend改变的是同一个state,那么在首次加载渲染的时候组件会陷入死循环,原因是touchstart会直接触发,但此时state也在初始化,导致state不停的变化。

解决方法:onTouchStart={() => {this.touchstart(index)}},给touchstart传一个匿名函数就可以了

问题升级:如果用map方法循环return一个组件,第一次加载的时候组件上绑定的所有的方法都会执行一遍,包括onClick这些,那么解决方法同上,绑一个匿名函数就可以了

2,样式冲突问题

虽然我们引入了css-modules,但是我们却发现这样一个现象:首次打开A页面,引入了A的css文件,这时候再打开B界面,又引入了B的css文件,而A的css文件还在,再打开C界面,又引入了C的css文件,而此时已经有了A,B,C三个css文件了。。。。我们期望的效果是打开A,只有A的css,打开B,只有B的css。。。,然而我查了很多资料,却发现没有办法这样,我又看了一下vue的实现,vue也是这样,不能实现我们期望的样式组件分离。

解决方法:在每个组件的最外面div设一个classname,然后在对应的css文件最外层就包一个这个classname,这样就能简单的解决样式冲突问题

原文地址:https://www.cnblogs.com/yanchenyu/p/7865074.html