React 学习指南 - 第十四天 🚀

主题：React 事件机制（合成事件 vs 原生事件）

在 React 中，事件处理是一个重要的部分。今天，我们深入解析 React 合成事件（SyntheticEvent），以及它与原生事件的区别。

1. React 事件 vs 原生事件

在 React 中，事件处理方式与原生 HTML 事件不同，它使用了合成事件（SyntheticEvent）。

1.1 原生事件（Vanilla JS）

<button onclick="handleClick()">点击我</button>
<script>
  function handleClick() {
    console.log("按钮被点击了");
  }
</script>

1.2 React 事件

function App() {
  function handleClick() {
    console.log("按钮被点击了");
  }

  return <button onClick={handleClick}>点击我</button>;
}

✅ React 事件使用 camelCase（小驼峰）命名，如 onClick，而不是 onclick
✅ React 事件不直接使用 addEventListener，而是通过 onClick 绑定

2. React 合成事件（SyntheticEvent）

在 React 中，所有事件都是合成事件（SyntheticEvent），它是对原生事件的封装，提供跨浏览器兼容性。

2.1 事件对象（event）

function App() {
  function handleClick(event) {
    console.log("事件对象：", event); // 这是一个合成事件
    console.log("原生事件：", event.nativeEvent); // 原生事件
  }

  return <button onClick={handleClick}>点击我</button>;
}

区别：

• event 是 React 合成事件（SyntheticEvent）

• event.nativeEvent 是 原生事件（原生 DOM Event）

✅ React 事件对象 event 是 React 自己实现的事件对象，它模拟原生事件但更轻量且兼容性更强。

3. 事件池（Event Pooling）

React 以前使用**事件池（Event Pooling）**来提高性能，事件在回调函数执行后会被重用。

3.1 事件池的影响

function App() {
  function handleClick(event) {
    console.log(event.type); // "click"
    setTimeout(() => {
      console.log(event.type); // 以前这里可能会报错，现在不会
    }, 1000);
  }

  return <button onClick={handleClick}>点击我</button>;
}

以前（React 17 之前）：

• 事件对象 event 会在事件处理完成后被重用，导致异步回调中无法访问正确的事件对象，可能会报错。

现在（React 17+）：

• React 17 以后，React 引入了事件对象持久化，确保事件对象在异步回调中仍然有效，避免了上述问题。

4. React 合成事件的特点

• 性能优化：React 合成事件通过事件池和事件委托，避免了每个 DOM 元素都需要绑定事件监听器的性能问题。

• 跨浏览器兼容性：React 合成事件会自动处理浏览器之间的差异，确保事件在不同浏览器中表现一致。

5. 事件委托与事件池

React 的事件委托意味着 所有的事件处理器都绑定到顶层容器（通常是 document）。这种方式有助于减少事件监听器的数量，从而提升性能。

5.1 事件委托（Event Delegation）

function App() {
  function handleClick(event) {
    console.log("按钮被点击了");
  }

  return (
    <div onClick={handleClick}>
      <button>按钮 1</button>
      <button>按钮 2</button>
      <button>按钮 3</button>
    </div>
  );
}

✅ 所有的点击事件都会被委托到 div 容器上，通过事件对象来判断点击的元素是什么（event.target）。
✅ 这样做的好处是减少了事件监听器的数量，提高了性能。

6. 事件修复与自定义事件

除了标准的合成事件，React 也允许你处理自定义事件并管理它们。你可以在 React 中通过 CustomEvent 创建和触发自定义事件。

6.1 创建和触发自定义事件

function App() {
  React.useEffect(() => {
    const event = new CustomEvent("customEvent", {
      detail: "自定义事件数据"
    });

    window.dispatchEvent(event);
  }, []);

  return <div>查看控制台</div>;
}

window.addEventListener("customEvent", (e) => {
  console.log(e.detail); // 自定义事件数据
});

✅ CustomEvent 允许你传递自定义数据，并在应用中触发和监听这些事件。

7. 合成事件与原生事件的对比

🔹 明天预告：React Router 入门与进阶（路由管理和动态路由）！ 🚀

gpt 一 直在生成  在第十四天失误三次 记录下  延迟可以接受