如何使用useEffect挂钩注册事件？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在学习有关如何使用钩子注册事件的Udemy课程，讲师给出了以下代码：

  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对下面的钩子做了一些修改

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

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

我期待 将新键入的键追加到当前状态并设置为新状态，但是，它会忘记旧状态并用新状态重写。

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

回答：

处理此类情况的最佳方法是查看事件处理程序中的操作。如果仅使用先前状态设置状态，则最好使用回调模式并仅在初始安装时注册事件侦听器。如果您不使用callback

pattern（https://reactjs.org/docs/hooks-

reference.html#usecallback），则事件侦听器将使用侦听器参考及其词法范围，但会创建一个新函数，并在新的渲染，因此在处理程序中您将无法进入更新状态

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>
  );

以上是 如何使用useEffect挂钩注册事件？ 的全部内容， 来源链接： utcz.com/qa/416463.html

回到顶部