Метод skipRender

Метод skipRender класса Component позволяет отключить автоматический перерендеринг шаблона компонента после выполнения какого-либо действия. Этот метод полезен, когда нужно выполнить операцию без обновления представления, например, при редиректе или вызове JavaScript-кода.

Синтаксис

<?php
	class MyComponent extends Component
	{
		public function someMethod()
		{
			$this->skipRender();
		}
	}
?>

Пример

Давайте создадим компонент, который при клике на кнопку выполняет редирект на другую страницу. Рендеринг компонента после этого не нужен, поэтому используем метод skipRender:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireRedirector;
	
	class RedirectComponent extends Component
	{
		public function redirectToHome()
		{
			$this->skipRender();
			return redirect()->route('home');
		}
		
		public function render()
		{
			return view('livewire.redirect-component');
		}
	}
?>

<div>
	<button wire:click="redirectToHome">
		Go to Home
	</button>
</div>

Результат выполнения кода:

<button>
	Go to Home
</button>

После клика на кнопку произойдет редирект на главную страницу, и текущий компонент не будет перерендерен.

Пример

Давайте используем метод skipRender вместе с эмуляцией тяжелого вычисления, которое не должно обновлять представление:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CalculationComponent extends Component
	{
		public $result = 0;
		
		public function performHeavyCalculation()
		{
			$this->result = $this->calculateSomething();
			$this->skipRender();
			
			session()->flash('message', 'Calculation completed!');
		}
		
		private function calculateSomething()
		{
			$sum = 0;
			for ($i = 1; $i <= 100; $i++) {
				$sum += $i;
			}
			return $sum;
		}
		
		public function render()
		{
			return view('livewire.calculation-component');
		}
	}
?>

<div>
	<button wire:click="performHeavyCalculation">
		Calculate
	</button>
	<div>
		{{ session('message') }}
	</div>
	<div>
		Result: {{ $result }}
	</div>
</div>

Результат выполнения кода:

"Calculation completed!"

В этом примере метод skipRender предотвращает обновление представления, и пользователь видит только флеш-сообщение о завершении вычислений, а значение свойства $result не отображается.

Пример

Давайте используем метод skipRender для отправки события в JavaScript без обновления представления:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class EventComponent extends Component
	{
		public function triggerEvent()
		{
			$this->skipRender();
			$this->dispatch('custom-event', ['message' => 'Hello from Livewire']);
		}
		
		public function render()
		{
			return view('livewire.event-component');
		}
	}
?>

<div>
	<button wire:click="triggerEvent">
		Trigger Event
	</button>
	<div
		x-data
		@custom-event.window="alert($event.detail.message)"
	>
	</div>
</div>

Результат выполнения кода:

alert('Hello from Livewire')

Метод skipRender позволяет выполнить действие без обновления представления, что особенно полезно при работе с JavaScript-событиями.

Смотрите также

метод skipRenderIf,
который отключает рендеринг при выполнении условия
метод skipMount,
который отключает инициализацию компонента
метод render,
который возвращает шаблон компонента
метод rendering,
который вызывается перед рендерингом