javascript - 为什么 Native DOM 事件总是重置 React 组件状态

Question

我知道合成事件 , 而不是 本地 dom 事件 , 应该是 React App 中处理交互的方式，但我想知道为什么行为如此奇怪。当 React 事件运行良好时，dom 事件总是将状态重置为初始状态。

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [num, setNum] = useState(0);
  function clickMe() {
    setNum(num + 1);
  }
  useEffect(() => {
    document.getElementById("app_btn").addEventListener("click", clickMe);
    return () =>
      document.getElementById("app_btn").removeEventListener("click", clickMe);
  }, []);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <div>App {num}</div>
      <button id="app_btn">DOM click</button> <br />
      <button onClick={clickMe}>React Click</button>
    </div>
  );
}

完整的项目可以在这里打开 https://stackblitz.com/edit/react-wqrmcu?file=src/App.js

Answer 1

发生这种情况是因为您的 native 事件处理程序仍然关闭了 num 的值。在第一次渲染后可用(该值为 0)。您需要在每次状态更新时添加和删除 native 事件监听器才能像这样工作:-

  useEffect(() => {
    document.getElementById("app_btn").addEventListener("click", clickMe);
    return () =>
      document.getElementById("app_btn").removeEventListener("click", clickMe);
  }, [num]);

正如@Mahdi 指出的那样，另一种方法可能是在状态更新器函数中使用回调。这将允许您在先前状态的基础上获得新状态。但仍然是 num的值 native 事件监听器可访问的值为 0。您可以通过执行 console.log(num) 来验证这一点。内 clickMe .