React.js面试精华：事件绑定与 setState 缺点详解

本资源是一份关于JavaScript和React.js框架问题的笔记，旨在作为个人学习和参考资料。主要内容围绕React.js的核心概念和技术细节展开。 首先，我们关注的是React事件绑定原理。React并未直接使用浏览器原生的事件系统，而是基于其Virtual DOM设计，实现了合成事件。合成事件的特点包括： 1. 事件注册：React将所有事件回调统一注册到document上，通过一个名为`dispatchEvent`的函数进行事件分发。事件名称使用小驼峰命名法，并且默认采用冒泡机制，若需捕获则在事件名后添加`Capture`。 2. 事件合成：当事件触发时，会经过一系列步骤，包括： - 分发到特定的ReactDOMComponent。 - 生成对应的合成事件对象，封装原生事件和冒泡逻辑。 - 从`listenerBank`（事件监听器银行）中查找匹配的回调函数，并将它们合成到事件对象中，直到顶层组件。 3. 批处理：React对合成事件中的回调函数进行批处理，这有助于优化性能，减少对DOM的操作次数，尤其是在多次调用`setState`时，React会在异步阶段合并更改并进行渲染。 接着，讨论的是React中的`setState`方法。`setState`是React组件状态管理的关键部分，但它有以下缺点： - 同步与异步的特性：尽管`setState`在原生事件和`setTimeout`中表现为同步执行，但在合成事件和生命周期钩子函数中，它的执行实际上是异步的。这是因为React会在更新之前合并所有`setState`调用，这样做的目的是为了提高性能，避免频繁地更新DOM。 - 不是真正的异步：虽然看起来像是异步，但实际上`setState`内部的代码仍然是同步执行的，只是执行顺序被调度到了后续的渲染周期，这意味着在某些情况下，用户可能会看到部分不一致的状态更新。 总结来说，这份笔记提供了解React框架中事件绑定的实现机制以及`setState`方法的工作原理和潜在性能优化。这对于理解React的内部工作流程和提升开发者的实践能力非常有帮助。