4、React 全方位解析：优势、劣势与应用场景

React 全方位解析：优势、劣势与应用场景

1. React 的优势

1.1 强大的抽象能力

React 对文档模型有着强大的抽象能力，它隐藏了底层接口，提供了标准化和合成的方法与属性。例如，在 React 中创建 onClick 事件时，事件处理程序接收的不是特定于浏览器的原生事件对象，而是一个封装了原生事件对象的合成事件对象。无论在哪个浏览器中运行代码，合成事件的行为都是一致的。此外，React 还为触摸事件提供了一组合成事件，这对于构建移动设备的 Web 应用非常有用。

React 的 DOM 抽象还体现在可以在服务器上渲染 React 元素，这有助于更好的搜索引擎优化（SEO）和提高性能。

1.2 速度与可测试性

一些框架在更新 DOM 时，除了必要的更新外，还可能进行不必要的更新，这会使复杂 UI 的性能变得更差，尤其是在网页上有大量动态 UI 元素时，用户会明显感觉到性能问题。

而 React 的虚拟 DOM 只存在于 JavaScript 内存中。每次数据发生变化时，React 首先使用虚拟 DOM 比较差异，只有当库确定渲染有变化时，才会更新实际的 DOM。最终，React 只更新那些绝对必要的部分，以确保内部状态（虚拟 DOM）和视图（真实 DOM）保持一致。例如，如果有一个

元素，通过组件的状态增加文本时，只会更新文本（即 innerHTML），而不会更新元素本身。与重新渲染整个元素集甚至整个页面（服务器端渲染）相比，这提高了性能。

虚拟 DOM 的另一个好处是，你可以在不使用 PhantomJS 等无头浏览器的情况下进行单元测试。有一个名为 Jest