我有一个基于类的组件，它使用多点触控将子节点添加到 svg，效果很好。现在，我正在尝试更新它以使用带有钩子的功能组件，如果没有其他原因，只是为了更好地理解它们。
为了停止浏览器使用手势的触摸事件，我需要对它们进行preventDefault操作，这要求它们不是被动的，并且由于在我需要使用的合成反应事件中缺乏被动配置的暴露svgRef.current.addEventListener('touchstart', handler, {passive: false})。我在componentDidMount()生命周期钩子中执行此操作，并在类中的钩子中清除它componentWillUnmount()。
当我将其转换为带有钩子的功能组件时，我最终得到以下结果：
export default function Board(props) {
const [touchPoints, setTouchPoints] = useState([]);
const svg = useRef();
useEffect(() => {
console.log('add touch start');
svg.current.addEventListener('touchstart', handleTouchStart, { passive: false });
return () => {
console.log('remove touch start');
svg.current.removeEventListener('touchstart', handleTouchStart, { passive: false });
}
});
useEffect(() => {
console.log('add touch move');
svg.current.addEventListener('touchmove', handleTouchMove, { passive: false });
return () => {
console.log('remove touch move');
svg.current.removeEventListener('touchmove', handleTouchMove, { passive: false });
}
});
useEffect(() => {
console.log('add touch end');
svg.current.addEventListener('touchcancel', handleTouchEnd, { passive: false });
svg.current.addEventListener('touchend', handleTouchEnd, { passive: false });
return () => {
console.log('remove touch end');
svg.current.removeEventListener('touchend', handleTouchEnd, { passive: false });
svg.current.removeEventListener('touchcancel', handleTouchEnd, { passive: false });
}
});
const handleTouchStart = useCallback((e) => {
e.preventDefault();
// copy the state, mutate it, re-apply it
const tp = touchPoints.slice();
// note e.changedTouches is a TouchList not an array
// so we can't map over it
for (var i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
tp.push(touch);
}
setTouchPoints(tp);
}, [touchPoints, setTouchPoints]);
const handleTouchMove = useCallback((e) => {
e.preventDefault();
const tp = touchPoints.slice();
for (var i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
// call helper function to get the Id of the touch
const index = getTouchIndexById(tp, touch);
if (index < 0) continue;
tp[index] = touch;
}
setTouchPoints(tp);
}, [touchPoints, setTouchPoints]);
const handleTouchEnd = useCallback((e) => {
e.preventDefault();
const tp = touchPoints.slice();
for (var i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
const index = getTouchIndexById(tp, touch);
tp.splice(index, 1);
}
setTouchPoints(tp);
}, [touchPoints, setTouchPoints]);
return (
<svg
xmlns={ vars.SVG_NS }
width={ window.innerWidth }
height={ window.innerHeight }
>
{
touchPoints.map(touchpoint =>
<TouchCircle
ref={ svg }
key={ touchpoint.identifier }
cx={ touchpoint.pageX }
cy={ touchpoint.pageY }
colour={ generateColour() }
/>
)
}
</svg>
);
}
这引发的问题是，每次渲染更新时，事件侦听器都会被删除并重新添加。这会导致 handleTouchEnd 在它有机会清除其他奇怪的添加触摸之前被移除。我还发现触摸事件不起作用，除非我使用手势退出触发更新的浏览器，删除现有的侦听器并添加新的集合。
我尝试在 useEffect 中使用依赖项列表，并且我看到几个人引用 useCallback 和 useRef 但我无法使这项工作更好（即，删除然后重新添加事件侦听器的日志仍然每次更新都会触发）。
有没有办法让 useEffect 只在挂载时触发一次，然后在卸载时清理，或者我应该放弃这个组件的钩子并坚持使用基于类的运行良好的钩子？
编辑
我还尝试将每个事件侦听器移到自己的位置useEffect并获取以下控制台日志：
remove touch start
remove touch move
remove touch end
add touch start
add touch move
add touch end
编辑 2
有几个人建议添加一个我尝试过的依赖数组：
useEffect(() => {
console.log('add touch start');
svg.current.addEventListener('touchstart', handleTouchStart, { passive: false });
return () => {
console.log('remove touch start');
svg.current.removeEventListener('touchstart', handleTouchStart, { passive: false });
}
}, [handleTouchStart]);
useEffect(() => {
console.log('add touch move');
svg.current.addEventListener('touchmove', handleTouchMove, { passive: false });
return () => {
console.log('remove touch move');
svg.current.removeEventListener('touchmove', handleTouchMove, { passive: false });
}
}, [handleTouchMove]);
useEffect(() => {
console.log('add touch end');
svg.current.addEventListener('touchcancel', handleTouchEnd, { passive: false });
svg.current.addEventListener('touchend', handleTouchEnd, { passive: false });
return () => {
console.log('remove touch end');
svg.current.removeEventListener('touchend', handleTouchEnd, { passive: false });
svg.current.removeEventListener('touchcancel', handleTouchEnd, { passive: false });
}
}, [handleTouchEnd]);
但我仍然收到一条日志，说每个useEffects 都已被删除，然后在每次更新时重新添加（所以每个touchstart，touchmove或者touchend导致油漆 - 这很多:)）
编辑 3
我已经替换window.(add/remove)EventListener为useRef()
ta