21、替代视图组件：React、jQuery 与 Handlebars 的对比分析

替代视图组件：React、jQuery 与 Handlebars 的对比分析

1. React 组件的优势

1.1 代码量小

与包含大量命令式 DOM 操作代码的视图组件相比，React 组件通常代码量更少。React 只需通过 JSX 表达 DOM 结构，无需大量的 DOM 操作代码。不过，如果没有 Flux 架构，使用 React 的应用中，React 组件可能会包含更多的数据转换代码。

例如，当 React 组件挂载到 DOM 时，可能需要对来自某个数据源（如 AJAX 响应）的数据进行转换。而在 Flux 架构中，数据源始终是存储的状态，因此在数据传递给 React 视图时，数据转换已经完成。要记住，是视图驱动存储状态的结构，而不是存储驱动视图的结构。

1.2 事件处理代码简洁

React 组件在事件处理代码方面也具有代码量小的优势，主要体现在两个方面：
- 声明式事件处理 ：React 中的事件处理程序直接在 JSX 中声明，它们与其他元素属性一样，是 DOM 树结构的一部分。无需先将元素插入 DOM，再查找元素并附加事件处理函数。
- Flux 架构下的事件处理 ：事件处理程序通常只是动作创建函数，原本在视图中的逻辑现在成为存储的一部分。

2. ReactJS 的缺点

2.1 内存消耗

React 是一个相对较大的库，会对应用加载时间产生明显影响。不过，与虚拟 DOM 消耗的内存相比，这只是次要问题。JavaScript 应用应尽量提高内存使用效率，因为内存使