Curry_On的博客

合成事件（Synthetic Event）是 React 自己实现的一套事件系统，模拟了浏览器原生 DOM 事件的所有能力，同时统一了不同浏览器的兼容性差异。所以，React 不是直接在真实 DOM 上绑定原生事件，而是拦截浏览器事件，自己封装了一套虚拟事件对象，统一管理和派发。这就是所谓的Synthetic（合成）。

本文围绕 `React.memo` + `useCallback` / `useMemo` 的组合使用，来聊聊在 React 中如何**构建高性能组件**。这是 Vue 3 开发者接触 React 时非常容易踩坑的一块，因为它涉及组件更新机制的底层行为，和 Vue 响应式机制差别很大。

作为 Vue 开发者， `onMounted`、`onUpdated` 这些生命周期钩子是再熟悉不过了，它们在**DOM 更新后同步执行**，你可以马上去获取真实的 DOM。但是在 React 中，`useEffect` 看似功能类似，它的**执行时机却与 Vue 有本质不同**。接下来我们从 React 的更新流程开始，一步步理解 `useEffect` 的真正执行时机，并引出`useLayoutEffect`，最后借此聊聊 Vue 和 React 背后的思维区别。

本篇文章将以 Vue 视角切入，带你从入门到核心源码，掌握 Hooks 的使用和原理。