useEventListener钩子和useKeyPress的实现似乎略有不同，但我正在努力找出哪种工具更适合我的特定用例。
我有一个自定义的下拉选择菜单，我想听听向下、向上和输入键的箭头。关于useKeyPress钩子，我的问题，或者更确切地说，是有两个渲染发生+我真的不确定为什么会有一个中间的useState。
例如，使用useKeyPress挂钩，如果用户单击向下箭头，事件侦听器会触发两次，其中一次会返回true，然后在KeyUp:上立即返回false
useEffect(() => {
window.addEventListener('keydown', downHandler);
window.addEventListener('keyup', upHandler);
return () => {
window.removeEventListener('keydown', downHandler);
window.removeEventListener('keyup', upHandler);
};
}, []);
此外，我不确定它为什么会这样，
const [keyPressed, setKeyPressed] = useState(false);
我只是想澄清一下这两者之间的区别，以及在我的用例中使用哪一个。
useKeyPress钩子没有更新某些内部状态，那么它将无法返回更新后的值引用并触发组件重新应答器。useKeyPress监听keyDown事件以将状态切换为true，然后监听keyUp事件以清除该状态(您不希望它一直为true。
useEventListener无疑是一个更重的工具；它能够监视更多的事件。不过，它不使用内部状态，而是需要将回调处理程序传递给它，以便在注册事件发生时调用。
对于轻量级实用程序，如果您只需要在组件中触发效果回调，onKeyPress非常有用，但对于较大的项目或您想知道发生了按键的情况，useEventListener可以处理它。
性能不应该是您主要关心的问题，因为它们对于几乎涵盖的每个用例都足够快。
useKeyPress可能不太适合您的用例，因为它只提供按键时的信息。它不允许您调用处理程序。它在内部跟踪按压状态本身。但您可能想要调用处理程序，例如更改下拉列表中当前选定的项目。
此外，我不确定它为什么这么做，
const [keyPressed, setKeyPressed] = useState(false);
这只是用例。它跟踪按钮的按下状态。
useEventListener是一个更通用的工具，可以让您自己进行更新和状态管理。它允许您根据订阅的事件决定更新内容。实际上，您可以重写useKeyPress以在内部使用useEventListener。