水合（Hydration）

使用 Livewire 感觉就像将服务器端 PHP 类直接附加到 Web 浏览器。诸如直接从按钮按下调用服务器端函数之类的事情支持这种错觉。但实际上，它只是一种错觉。

在后台，Livewire 的行为实际上更像一个标准的 Web 应用程序。它向浏览器渲染静态 HTML，监听浏览器事件，然后发出 AJAX 请求来调用服务器端代码。

由于 Livewire 向服务器发出的每个 AJAX 请求都是"无状态的"（意味着没有长期运行的后端进程来保持组件的状态），Livewire 必须在进行任何更新之前重新创建组件的最后已知状态。

它通过在每次服务器端更新后对 PHP 组件进行"快照"来实现此目的，以便可以在下一个请求上重新创建或_恢复_组件。

在本文档中，我们将把获取快照的过程称为"脱水"（dehydration），把从快照重新创建组件的过程称为"水合"（hydration）。

脱水

当 Livewire _脱水_服务器端组件时，它会做两件事：

• 将组件的模板渲染为 HTML
• 创建组件的 JSON 快照

渲染 HTML

在组件被挂载或进行更新后，Livewire 调用组件的 render() 方法将 Blade 模板转换为原始 HTML。

以下面的 counter 组件为例：

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return <<<'HTML'
        <div>
            Count: {{ $count }}

            <button wire:click="increment">+</button>
        </div>
        HTML;
    }
};

在每次挂载或更新后，Livewire 会将上述 counter 组件渲染为以下 HTML：

<div>
    Count: 1

    <button wire:click="increment">+</button>
</div>

快照

为了在下一个请求期间在服务器上重新创建 counter 组件，会创建一个 JSON 快照，尝试尽可能多地捕获组件的状态：

{
    state: {
        count: 1,
    },

    memo: {
        name: 'counter',

        id: '1526456',
    },
}

注意快照的两个不同部分：memo 和 state。

memo 部分用于存储识别和重新创建组件所需的信息，而 state 部分存储组件所有公共属性的值。

INFO

上面的快照是 Livewire 中实际快照的简化版本。在实际应用程序中，快照包含更多信息，例如验证错误、子组件列表、区域设置等。有关快照对象的更详细信息，你可以参考 快照架构文档。

在 HTML 中嵌入快照

当组件首次渲染时，Livewire 将快照作为 JSON 存储在名为 wire:snapshot 的 HTML 属性中。这样，Livewire 的 JavaScript 核心可以提取 JSON 并将其转换为运行时对象：

<div wire:id="..." wire:snapshot="{ state: {...}, memo: {...} }">
    Count: 1

    <button wire:click="increment">+</button>
</div>

水合

当触发组件更新时，例如，在 counter 组件中按下"+"按钮，会将如下有效负载发送到服务器：

{
    calls: [
        { method: 'increment', params: [] },
    ],

    snapshot: {
        state: {
            count: 1,
        },

        memo: {
            name: 'counter',

            id: '1526456',
        },
    }
}

在 Livewire 可以调用 increment 方法之前，它必须首先创建一个新的 counter 实例并用快照的状态为其播种。

以下是一些实现此结果的 PHP 伪代码：

$state = request('snapshot.state');
$memo = request('snapshot.memo');

$instance = Livewire::new($memo['name'], $memo['id']);

foreach ($state as $property => $value) {
    $instance[$property] = $value;
}

如果你遵循上述脚本，你会看到在创建 counter 对象后，其公共属性会根据快照提供的状态进行设置。

高级水合

上面的 counter 示例很好地演示了水合的概念；但是，它只演示了 Livewire 如何处理水合简单值（如整数（1））。

如你所知，Livewire 支持除整数之外更复杂的属性类型。

让我们看一个稍微复杂一点的示例 - todos 组件：

<?php

use Livewire\Component;

new class extends Component
{
    public $todos;

    public function mount() {
        $this->todos = collect([
            'first',
            'second',
            'third',
        ]);
    }
};

如你所见，我们将 $todos 属性设置为一个 Laravel 集合，其中包含三个字符串作为其内容。

仅 JSON 无法表示 Laravel 集合，因此，Livewire 创建了自己的模式，将元数据与快照内的纯数据相关联。

以下是此 todos 组件的快照状态对象：

state: {
    todos: [
        [ 'first', 'second', 'third' ],
        { s: 'clctn', class: 'Illuminate\\Support\\Collection' },
    ],
},

如果你期望更直接的东西，这可能会让你感到困惑，比如：

state: {
    todos: [ 'first', 'second', 'third' ],
},

但是，如果 Livewire 根据此数据水合组件，它将无法知道这是一个集合而不是一个普通数组。

因此，Livewire 支持元组形式的替代状态语法（包含两个项目的数组）：

todos: [
    [ 'first', 'second', 'third' ],
    { s: 'clctn', class: 'Illuminate\\Support\\Collection' },
],

当 Livewire 在水合组件状态时遇到元组时，它使用存储在元组第二个元素中的信息来更智能地水合存储在第一个元素中的状态。

为了更清楚地演示，以下是简化的代码，显示 Livewire 如何根据上述快照重新创建集合属性：

[ $state, $metadata ] = request('snapshot.state.todos');

$collection = new $metadata['class']($state);

如你所见，Livewire 使用与状态相关的元数据来派生完整的集合类。

深度嵌套元组

这种方法的一个明显优势是能够脱水和水合深度嵌套的属性。

例如，考虑上面的 todos 示例，但现在使用 Laravel Stringable 而不是纯字符串作为集合中的第三项：

<?php

use Livewire\Component;

new class extends Component
{
    public $todos;

    public function mount() {
        $this->todos = collect([
            'first',
            'second',
            str('third'),
        ]);
    }
};

此组件状态的脱水快照现在将如下所示：

todos: [
    [
        'first',
        'second',
        [ 'third', { s: 'str' } ],
    ],
    { s: 'clctn', class: 'Illuminate\\Support\\Collection' },
],

如你所见，集合中的第三项已脱水为元数据元组。元组中的第一个元素是纯字符串值，第二个是标记，表示 Livewire 此字符串是 stringable。

支持自定义属性类型

在内部，Livewire 对最常见的 PHP 和 Laravel 类型提供了水合支持。但是，如果你希望支持不受支持的类型，可以使用 Synthesizers — Livewire 的内部机制来水合/脱水非原始属性类型。