### 可变性与不可变性
与许多其他响应式框架不同，**交互式 API 在更新全局状态或本地上下文时不需要使用不可变性**。您可以直接修改对象和数组，响应式系统仍将按预期工作。这在许多情况下可以使代码更直观和简洁。
例如，您可以像这样向数组添加新项：
```javascript
const { state } = store( 'myArrayPlugin', {
state: {
list: [ '项目1', '项目2' ],
},
actions: {
addItem() {
// 正确做法：
state.list.push( '新项目' );
// 错误做法：
state.list = [ ...state.list, '新项目' ]; // 不要这样做！
},
},
} );
```
无需像在其他框架中那样创建新数组或使用展开运算符。交互式 API 将检测此更改并更新依赖于 `state.list` 的任何 UI 部分。
### 响应式副作用
除了自动更新 UI 之外，交互式 API 还允许您使用 `data-wp-watch` 等指令在响应式数据更改时执行副作用。副作用对于日志记录、进行 API 调用或更新与 UI 不直接相关的应用程序其他部分等任务非常有用。
以下是使用 `data-wp-watch` 的示例：
```html
```
```javascript
store( 'myCounterPlugin', {
actions: {
increment() {
const context = getContext();
context.counter += 1;
},
},
callbacks: {
logCounter: () => {
const context = getContext();
console.log( `计数器当前值为：${ context.counter }` );
},
},
} );
```
在此示例中：
1. `data-wp-context` 指令添加了一个本地上下文，其中包含属性 `counter`，其值为 `0`。
2. `data-wp-watch` 指令设置为 `callbacks.logCounter`。
3. 每次 `context.counter` 更改时，`logCounter` 回调都将执行。
4. `logCounter` 回调将当前计数器值记录到控制台。
这使您可以创建声明式副作用，这些副作用会自动响应数据更改而运行。`data-wp-watch` 的其他一些用例可能包括：
- 在数据更改时将数据保存到 `localStorage`。
- 发送分析事件。
- 为无障碍目的更改焦点。
- 更新页面标题、元标记或 `` 属性。
- 触发动画。
## 结论
在使用交互式 API 时，请记住要从状态、操作和副作用的角度思考。定义您的数据，描述应如何更改，然后让交互式 API 处理其余工作。这种思维转变可能需要一些时间，特别是如果您习惯了更命令式的编程风格，但通过接受它，您将释放交互式 API 的全部潜力，以创建真正动态和交互式的 WordPress 块，让您的用户感到愉悦。
### 你能发现这个错误吗？
在命令式示例中，为了教学目的故意引入了一个错误。你能找到它吗？这可不容易！
查看答案！
如果先按下显示按钮，接着按下激活按钮，最后再按下隐藏按钮，代码不会通过`statusParagraph.classList.add('inactive');`添加`inactive`类。因此，当用户下次按下显示按钮时，段落文本将不会显示为红色。
这类错误在命令式代码中非常常见，因为你需要手动控制所有条件。而在声明式代码中则不存在这类问题，因为框架会负责DOM更新，永远不会遗漏任何细节。
### 声明式方法的优势
如示例所示，命令式方法需要详细步骤并直接操作DOM，随着交互复杂度的增加，代码会迅速变得复杂且难以维护。可能的状态和元素越多，需要添加的条件逻辑就越多，代码复杂度呈指数级增长。而声明式方法通过状态管理和框架处理DOM更新来简化流程，从而产生更易读、易维护和可扩展的代码。
## 响应式系统
得益于对响应式特性的运用，交互式API是一个声明式框架。在响应式系统中，数据的变更会自动触发用户界面的更新，确保视图始终反映应用程序的当前状态。
### 响应式工作原理
交互式API采用细粒度响应式系统，其运作方式如下：
1. **响应式状态**：在交互式API中，全局状态和本地上下文都是响应式的。这意味着当这些数据源发生变化时，依赖它们的任何UI部分都会自动更新。
- **全局状态**：这是可在整个交互块中访问的全局数据
- **本地上下文**：这是特定元素及其子元素专属的本地数据
- **派生状态**：除了基础状态属性外，您还可以定义计算属性，这些属性会在其依赖项变更时自动更新
_请访问[理解全局状态、本地上下文和派生状态](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md)指南，详细了解如何在交互式API中使用不同类型的响应式状态。_
2. **操作**：这些通常由事件处理程序触发的函数，用于变更全局状态或本地上下文
3. **响应式绑定**：使用特殊属性（如`data-wp-bind`、`data-wp-text`或`data-wp-class`）将HTML元素与响应式状态值绑定
4. **自动更新**：当操作变更全局状态或本地上下文时，交互式API会自动更新依赖该状态的所有DOM部分（直接依赖或通过派生状态间接依赖）
让我们通过分析之前的示例来解析这些概念：
```javascript
const { state } = store( 'myInteractivePlugin', {
state: {
isVisible: false,
isActive: false,
get visibilityText() {
return state.isVisible ? 'hide' : 'show';
},
// ... 其他派生状态
},
actions: {
toggleVisibility() {
state.isVisible = ! state.isVisible;
},
// ... 其他操作
},
} );
```
在这段代码中：
- `isVisible`和`isActive`是基础状态属性
- `visibilityText`是派生状态，会在`isVisible`变更时自动更新
- `toggleVisibility`是修改状态的操作
HTML绑定如下所示：
```html
```
响应式机制的实际运作流程：
1. 当按钮被点击时，触发`toggleVisibility`操作
2. 该操作更新`state.isVisible`
3. 交互式API检测到此变更并自动：
- 更新按钮的文本内容（因为`data-wp-text="state.visibilityText"`）
- 更改`aria-expanded`属性（由于`data-wp-bind--aria-expanded="state.isVisible"`）
- 更新任何其他依赖`isVisible`或`visibilityText`的DOM部分
# 响应式与声明式思维模式
交互性API是一个响应式声明式框架，与其他现代框架（如React、Vue、Svelte或Alpine）类似。在使用交互性API时，采用正确的思维模式对于充分发挥其潜力至关重要。本指南将解释响应式和声明式的核心概念，为有效使用交互性API奠定基础。
## 声明式 vs 命令式
**声明式编程**描述的是程序_应该实现什么_，它关注期望的结果，而不显式列出实现该结果的命令或步骤。相比之下，**命令式编程**通过明确说明操作程序状态的每个步骤来指定_如何_完成任务。
### 命令式方法
在Web开发的早期阶段，命令式方法占据主导地位。这种方法涉及使用JavaScript手动更新DOM以反映变化。
以这个包含两个按钮和一个段落的交互式区块为例：
- **显示/隐藏按钮**：切换段落可见性并启用/禁用"激活"按钮
- **激活/停用按钮**：在"激活"（绿色）和"非激活"（红色）状态间切换段落文本和颜色
```html
```
如您所见，对于每种情况，您都必须使用JavaScript来修改DOM中所有已更改的内容，同时还需要考虑之前的状态。
### 声明式方法
声明式方法通过关注_应该发生什么_来简化流程。用户界面会根据状态变化自动更新。以下是使用交互性API声明式方法的类似示例：
```html
```
```js
import { store } from '@wordpress/interactivity';
const { state } = store( 'myInteractivePlugin', {
state: {
isVisible: false,
isActive: false,
get visibilityText() {
return state.isVisible ? '隐藏' : '显示';
},
get activationText() {
return state.isActive ? '停用' : '激活';
},
get paragraphText() {
return state.isActive ? '这是激活状态' : '这是非激活状态';
},
},
actions: {
toggleVisibility() {
state.isVisible = ! state.isVisible;
if ( ! state.isVisible ) state.isActive = false;
},
toggleActivation() {
state.isActive = ! state.isActive;
},
},
} );
```
在这个声明式示例中，用户界面会根据当前状态自动更新。作为开发人员，您只需要声明必要的状态、任何派生状态、修改状态的操作，以及DOM的哪些部分依赖于状态的哪些部分。框架会负责对DOM进行所有必要的更新，使其始终与当前状态保持同步。无论框架控制的元素数量有多少，逻辑都保持简单且易于维护。