29、React与Hotwire应用开发对比及Hotwire实现详解

React与Hotwire应用开发对比及Hotwire实现详解

1. React开发工具界面介绍

在开发界面的左侧，展示着按React组件排序的页面上的React应用树，而非按DOM元素排序。像VenueHeader、VenueBody、Row和Seat这些组件名称会在界面中显示。当选择某个特定组件时，右侧会显示该组件的详细信息，包括组件当前的props值，还能查看该组件使用的钩子以及包含所选组件的整个组件树。

屏幕右上角有一些图标，它们各有功能：
| 图标 | 功能 |
| — | — |
| 手表图标 | 暂停特定组件的重新渲染 |
| 眼睛图标 | 打开DOM检查器以查看所选元素 |
| 虫子图标 | 将信息记录到浏览器控制台 |
| 括号图标 | 跳转到该组件的源代码 |

2. React与Hotwire代码量对比及差异来源

在进行React页面和Hotwire页面的开发对比时，明显发现React版本的代码量比Hotwire版本多很多。虽然不同语言和框架的代码行数难以直接比较，但从实际情况来看，Hotwire版本的场馆页面约300行代码，就替换了约500行的React/JSX代码。而且在日程页面上，这种差异更加明显，Hotwire只需几行代码实现的功能，React却需要大量代码。

代码量差异主要来源于以下几个方面：
- TypeScript样板代码 ：React鼓励创建更多的领域对象，结合TypeScript，就需要更多代码来定义类型。特别是在为reducers中的每个单独动作对象编写接口时，这种情况更为明显。