Директива `@island`⚓︎

Директива @island создает изолированные области внутри компонента, которые обновляются независимо, без повторного рендеринга всего компонента.

Базовое использование⚓︎

Оберните любую часть вашего шаблона в @island, чтобы создать изолированную область:

resources/views/components/⚡dashboard.blade.php

<?php

use Livewire\Attributes\Computed;
use Livewire\Component;
use App\Models\Revenue;

new class extends Component {
    #[Computed]
    public function revenue()
    {
        // Сложные вычисления...
        return Revenue::yearToDate();
    }
};
?>

<div>
    @island
        <div>
            Доход: {{ $this->revenue }}

            <button type="button" wire:click="$refresh">Обновить</button>
        </div>
    @endisland

    <div>
        <!-- Другой контент... -->
    </div>
</div>

При нажатии на кнопку «Обновить» перерендерится только островок — остальная часть компонента останется нетронутой.

Ленивая загрузка островков⚓︎

Отложите первоначальный рендеринг островка до момента загрузки страницы с помощью параметра lazy:

@island(lazy: true)
    <div>
        Доход: {{ $this->revenue }}
    </div>
@endisland

Островок сначала отобразит состояние загрузки, а затем получит свое содержимое в отдельном запросе.

Сравнение Lazy и Deferred⚓︎

По умолчанию lazy ждет, пока островок не станет видимым в окне просмотра. Используйте defer, чтобы загрузить его сразу после загрузки страницы:

{ Загружается при появлении в области видимости }
@island(lazy: true)
    <!-- ... -->
@endisland

{ Загружается сразу после загрузки страницы }
@island(defer: true)
    <!-- ... -->
@endisland

Пользовательские состояния загрузки⚓︎

Используйте @placeholder, чтобы настроить то, что отображается во время загрузки:

@island(lazy: true)
    @placeholder
        <div class="animate-pulse">
            <div class="h-32 bg-gray-200 rounded"></div>
        </div>
    @endplaceholder

    <div>
        Доход: {{ $this->revenue }}
    </div>
@endisland

Именованные островки⚓︎

Давайте островкам имена, чтобы обращаться к ним из других мест вашего компонента:

@island(name: 'revenue')
    <div>Доход: {{ $this->revenue }}</div>
@endisland

<button type="button" wire:click="$refresh" wire:island="revenue">
    Обновить доход
</button>

Директива wire:island ограничивает область обновлений конкретными островками.

Зачем использовать островки?⚓︎

Островки обеспечивают изоляцию производительности без накладных расходов на создание отдельных дочерних компонентов, управление пропсами или взаимодействие между компонентами.

Используйте островки, когда:

Вы хотите изолировать ресурсоемкие вычисления
Вам нужны независимые области обновления внутри одного компонента
Вам нужна более простая архитектура, чем вложенные компоненты

Узнать больше об островках →

Справочник⚓︎

@island(
    ?string $name = null,
    bool $lazy = false,
    bool $defer = false,
)
    <!-- Контент -->
@endisland

Параметр	Тип	По умолчанию	Описание
`$name`	`?string`	`null`	Уникальное имя для обращения к островку с помощью `wire:island`
`$lazy`	`bool`	`false`	Отложить рендеринг до тех пор, пока островок не станет видимым в окне просмотра
`$defer`	`bool`	`false`	Загрузить сразу после загрузки страницы, не дожидаясь видимости в окне просмотра

Директива @island⚓︎