React中使用FastClick为什么还是有300ms延迟?
我在React项目移动端按钮点击时还是有明显的300ms延迟,明明已经引入了FastClick。按照文档在componentDidMount里初始化了,但点击按钮还是有延迟,甚至有时候会触发两次事件…
import FastClick from 'fastclick';
class App extends React.Component {
componentDidMount() {
FastClick.attach(document.body); // 这样写对吗?
}
handleClick = () => {
console.log('被点击了?');
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
试过把FastClick放在服务端渲染入口文件里初始化,但项目是客户端渲染的。有没有可能是和其他库冲突?或者React事件机制有什么特别要注意的?
user-scalable=no,应该能解决问题。如果还是想用FastClick,确保它在dom加载完成后初始化,你的写法是对的,但可能会和React的合成事件机制冲突。建议换成更现代的方式,比如直接用touch事件代替click。
实在不行就把FastClick去掉,现在大多数场景都不需要它了,省点折腾的时间去喝杯咖啡吧。