【图】React源码解析-第四部分:事件与跨层传递

102 阅读1分钟

React源码解析 宏观架构 (13).png

React 合成事件系统(事件委托 + 池化)

deepseek_mermaid_20260706_49b1c7.png

React 并没有将事件监听器直接挂载到真实 DOM 上,而是实现了  “事件委托”  机制——所有事件统一在根容器上监听。合成事件(SyntheticEvent)  是原生事件的跨浏览器包装,它实现了 W3C 规范。事件池(Event Pooling)  在 React 17 之前存在,会在回调执行后清空事件属性以优化内存;17 版本后为了兼容并发模式已弃用池化,但委托机制保留。

Context 值的传播机制

deepseek_mermaid_20260706_6ee4a5.png

Context 的传播依赖订阅-发布模式。当 Provider 的 value 变化时,React 不会暴力遍历整个子树,而是沿着 Fiber 树查找被 useContext 或 Context.Consumer 标记的节点。值比对使用 Object.is 算法,如果引用不变,则跳过子树的重新渲染。因此,若在 Provider 中直接传递对象字面量 value={{count: 1}},每次渲染都会触发所有消费者更新;正确的做法是使用 useMemo 或 useState 保持引用稳定。