Метод rendering
Метод rendering является хуком жизненного цикла компонента
Livewire. Он вызывается автоматически непосредственно перед тем,
как компонент начинает рендерить своё представление. Данный метод
позволяет выполнить дополнительную логику, подготовить данные
или изменить состояние компонента перед отображением.
Метод rendering не принимает никаких параметров и не
возвращает никакого значения. Он просто выполняется в нужный
момент жизненного цикла компонента. Этот хук особенно полезен,
когда нужно выполнить действия, которые должны произойти каждый
раз перед рендерингом, независимо от того, был ли это начальный
рендеринг или обновление после действия пользователя.
Синтаксис
<?php
namespace AppLivewire;
use LivewireComponent;
class MyComponent extends Component
{
public function rendering()
{
// Logic before rendering
}
public function render()
{
return view('livewire.my-component');
}
}
?>
Пример
Давайте будем записывать в свойство $time текущую дату
при каждом рендеринге компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
class DateTimeComponent extends Component
{
public $time;
public function rendering()
{
$this->time = date('H:i:s');
}
public function render()
{
return view('livewire.date-time-component');
}
}
?>
<div>
<p>Current time: {{ $time }}</p>
<button wire:click="$refresh">Refresh</button>
</div>
Результат выполнения кода:
<div>
<p>Current time: 15:30:45</p>
<button>Refresh</button>
</div>
При каждом клике на кнопку Refresh будет вызываться обновление
компонента, а метод rendering обновит время на текущее.
Пример
Давайте будем вычислять количество элементов массива перед рендерингом:
<?php
namespace AppLivewire;
use LivewireComponent;
class ArrayComponent extends Component
{
public $items = ['a', 'b', 'c', 'd', 'e'];
public $count;
public function rendering()
{
$this->count = count($this->items);
}
public function addItem()
{
$this->items[] = 'new';
}
public function render()
{
return view('livewire.array-component');
}
}
?>
<div>
<p>Items count: {{ $count }}</p>
<ul>
@foreach ($items as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
<button wire:click="addItem">Add item</button>
</div>
Результат выполнения кода:
<div>
<p>Items count: 5</p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<button>Add item</button>
</div>
После добавления нового элемента метод rendering
пересчитает количество и обновит отображение.
Пример
Давайте использовать метод rendering для логирования
всех рендерингов компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
use IlluminateSupportFacadesLog;
class LogComponent extends Component
{
public $message;
public $counter = 0;
public function rendering()
{
Log::info('Component is rendering', [
'counter' => $this->counter,
'time' => now()
]);
$this->message = 'Rendered ' . $this->counter . ' times';
}
public function increment()
{
$this->counter++;
}
public function render()
{
return view('livewire.log-component');
}
}
?>
<div>
<p>{{ $message }}</p>
<p>Counter: {{ $counter }}</p>
<button wire:click="increment">+1</button>
</div>
Результат выполнения кода:
<div>
<p>Rendered 5 times</p>
<p>Counter: 5</p>
<button>+1</button>
</div>
Каждый раз при рендеринге компонента в лог будет записываться
информация с текущим состоянием и временем, а свойство
$message будет обновляться для отображения количества
рендерингов.
