33、前端交互利器：Stimulus与React实战解析

前端交互利器：Stimulus与React实战解析

1. Stimulus简介

Stimulus是一个小型的JavaScript工具，它与HTML集成，旨在适应DOM变化，尤其擅长处理Turbo Frames或Turbo Streams带来的DOM变化。与React不同，Stimulus认为Web应用主要基于服务器，客户端的作用是在服务器渲染的标记之上提供一些交互性。它广泛使用HTML标记来指定HTML和JavaScript之间的交互。

1.1 Stimulus核心概念

• 控制器（Controllers） ：存放Stimulus JavaScript代码的地方，包含响应浏览器中触发事件的方法。
• 动作（Actions） ：声明希望Stimulus在页面上的事件发生时执行某些操作。
• 目标（Targets） ：对控制器有意义的DOM元素，通常用于确定页面状态或根据页面状态更改元素。
• 数据映射和值（Data maps and values） ：存储在DOM中对控制器有意义的状态。
• 类（Classes） ：数据映射和值的常见用途是表示CSS类，Stimulus提供了一种特殊机制来管理和更新DOM元素上的CSS类。

1.2 Stimulus与其他框架对比

框架