javascript - 如何使用 useEffect 钩子(Hook)注册事件？

Question

我正在学习有关如何使用 Hook 注册事件的 Udemy 类(class)，讲师给出了以下代码:

  const [userText, setUserText] = useState('');

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

现在效果很好，但我不相信这是正确的方法。原因是，如果我理解正确的话，在每次重新渲染时，事件每次都会继续注册和取消注册，我只是认为这不是正确的方法。

所以我对下面的 useEffect Hook 做了一些修改

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

  return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, []);

通过使用空数组作为第二个参数，让组件仅运行一次效果，模仿 componentDidMount。当我尝试结果时，奇怪的是，在我键入的每个键上，它不是附加，而是被覆盖。

我期望 setUserText(${userText}${key}); 将新键入的 key 附加到当前状态并设置为新状态，但相反，它会忘记旧状态并用新状态重写。

我们应该在每次重新渲染时注册和取消注册事件，这真的是正确的方法吗？

Answer 1

处理此类情况的最佳方法是查看您在事件处理程序中执行的操作。

如果您只是使用之前的 state 设置 state，最好使用回调模式并仅在初始挂载时注册事件监听器.

如果您不使用callback pattern ，事件监听器正在使用监听器引用及其词法范围，但会在每次渲染时使用更新的闭包创建一个新函数；因此在处理程序中您将无法访问更新后的状态

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
        window.removeEventListener("keydown", handleUserKeyPress);
    };
}, [handleUserKeyPress]);

  return (
      <div>
          <h1>Feel free to type!</h1>
          <blockquote>{userText}</blockquote>
      </div>
  );