在前端开发中，我们常常需要处理用户操作 Esc 键的情况。而 react-esc 是一个可以在 React 应用中方便地处理 Esc 键的 npm 包。本文将为大家详细介绍 react-esc 的使用方法。
安装
在终端中使用以下命令安装 react-esc：
npm install react-esc
使用
在需要使用 react-esc 的组件中，引入 react-esc 包，并在 componentDidMount 生命周期中调用 onEsc 方法，传入一个回调函数，该回调函数就是用户按下 Esc 键后要执行的函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ------------
----- ----------- ------- --------------- -
------------------- -
-------- -- -
------------------ --- -----
---
-
-------- -
------ ------- ----------------
-
-在 componentWillUnmount 生命周期中，需要调用 offEsc 方法，以取消对 Esc 键的监听。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- ------------
----- ----------- ------- --------------- -
------------------- -
-------- -- -
------------------ --- -----
---
-
---------------------- -
---------
-
-------- -
------ ------- ----------------
-
-深度学习
接下来，让我们来了解 react-esc 的原理。
react-esc 的本质是对 document 对象的 keydown 事件进行监听。在 onEsc 方法中，会向 document 对象注册一个 keydown 的事件监听器，当监听到用户按下 Esc 键时，会调用回调函数。而在 offEsc 方法中，则会取消对 document 对象的 keydown 事件监听。
需要注意的是，当多个组件同时使用 react-esc 时，react-esc 实际上只注册了一个 document 对象的 keydown 事件监听器。这是因为在浏览器中，keydown 事件是在冒泡阶段由子元素向父元素进行传递的。因此，当用户按下 Esc 键时，所有的 keydown 事件监听器都会被触发，而 react-esc 只需要在其中的一个监听器中执行回调函数即可。
指导意义
使用 react-esc 可以方便地处理用户按下 Esc 键的情况，并且在多个组件同时使用时也会有良好的性能表现。在开发 React 应用时，我们建议开发者优先考虑使用已有的 npm 包，而不是重复造轮子，以提高开发效率和代码质量。
示例代码
让我们来实际运用 react-esc，实现一个按下 Esc 键即可关闭 Modal 的示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- ------------
----- ----- ------- --------------- -
------------------- -
-------- -- -
---------------------
---
-
---------------------- -
---------
-
-------- -
------ -
---- ------------------
---- --------------------------
---------------------
------- ----------------------------------------
------
------
--
-
-
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ -----
--
-------------------- - --------------------------------
--------------------- - ---------------------------------
-
----------------- -
--------------- ------------ ---- ---
-
------------------ -
--------------- ------------ ----- ---
-
-------- -
------ -
-----
------- --------------------------------- --------------
----------------------- -- -
------ --------------------------------
---------- -----------
--------
--
------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65249