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