在 React 中，如何订阅文档鼠标移动?

Question

这是我在原版JavaScript中的代码

document.addEventListener('mousemove', function (e) {
console.log(e.pageX) //just a placeholder code
})

我的问题是：如何在 react 中复制这段代码(我使用 react 钩子(？我想在范围范围内订阅事件文档，并可用于特定组件

Answer 1

你应该使用 useEffect 进行订阅。在返回函数中，您应该添加清理函数以释放资源。

useEffect(() => {
const mouseListener = (e) => {
console.log(e.pageX) //just a placeholder code
})
document.addEventListener('mousemove', mouseListener);
// Specify how to clean up after this effect:
return function cleanup() {
document.removeEventListener('mousemove', mouseListener);
};
});