Reactjs 如何使用 React useEffect 窗口 removeEventListener

在React Hooks文档中，演示了如何在组件的清理阶段移除VentListener.https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

在我的用例中，我试图将VentListener条件删除为功能组件的状态属性.

下面是一个从未卸载组件但应移除事件侦听器的示例:

function App () {
  const [collapsed, setCollapsed] = React.useState(true);

  React.useEffect(
    () => {
      if (collapsed) {
        window.removeEventListener('keyup', handleKeyUp); // Not the same "handleKeyUp" :(
      } else {
        window.addEventListener('keyup', handleKeyUp);
      }
    },
    [collapsed]
  );

  function handleKeyUp(event) {
    console.log(event.key);
    switch (event.key) {
      case 'Escape':
        setCollapsed(true);
        break;
    }
  }

  return collapsed ? (
    <a href="javascript:;" onClick={()=>setCollapsed(false)}>Search</a>
  ) : (
    <span>
      <input placeholder="Search" autoFocus />&nbsp;
      <a href="javascript:;">This</a>&nbsp;
      <a href="javascript:;">That</a>&nbsp;
      <input placeholder="Refinement" />
    </span>
  );
}
ReactDOM.render(<App />, document.body.appendChild(document.createElement('div')));

(https://codepen.io/caqu/pen/xBeBMN岁时的活体样本)

我看到的问题是，removeEventListener中的handleKeyUp引用在每次组件渲染时都会发生变化.函数handleKeyUp需要引用setCollapsed，因此必须用App括起来.在useEffect中移动handleKeyUp似乎也会多次开火，并失go 对原来handleKeyUp的参考.

我怎样才能有条件地打开窗口.在不卸载组件的情况下使用React钩子移除VentListener？