useEffect监听键盘esc操作

在React中，可以使用`useEffect`钩子来监听键盘事件，包括监听键盘上的ESC键操作。下面是一个示例代码，演示如何使用`useEffect`来监听ESC键的按下事件：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.keyCode === 27) { // 27是ESC键的键码
        // 在这里执行你想要的操作
        console.log('ESC键被按下');
      }
    };

    document.addEventListener('keydown', handleKeyPress);

    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  return <div>My Component</div>;
}

export default MyComponent;

在上面的代码中，我们使用了`useEffect`钩子来创建一个键盘事件的监听器。在`useEffect`的回调函数中，我们首先定义了一个`handleKeyPress`函数来处理按键事件。当按下的键码为27时，即ESC键被按下时，我们可以在这里执行相应的操作。

然后，我们通过`document.addEventListener`将`handleKeyPress`函数添加为键盘按下事件的监听器。在组件卸载时，我们使用`document.removeEventListener`来移除该监听器，以避免内存泄漏。

需要注意的是，由于我们不希望每次组件重新渲染时都添加新的事件监听器，所以我们将空数组作为`useEffect`的第二个参数传递给它。这样，`useEffect`只会在组件挂载时执行一次，并且在组件卸载时清除事件监听器。