Livewire ライフサイクル フックについて

/ Livewire / By
ショコラ
ショコラ

Livewire ライフサイクル フックについて

ライブワイヤーコンポーネントは、ライフサイクルフックを通る。
ライフサイクルフックの部分（↓のHooks）や特定のプロパティが更新される箇所（updateFoo）で任意のコードを実行することができる。

ハイドレート・・・ブラウザから JSON のデータが送られてきて、PHP に変換されるタイミング。

デハイドレート・・・PHP の処理が終わり、データを JSON にしてブラウザに送るタイミング。
↑今のところの解釈

参考URL
https://calebporzio.com/livewire-isnt-actually-live

もっさん先輩
もっさん先輩
HooksDescription
bootコンポーネントがインスタンス化された直後、他のライフサイクルメソッドが呼ばれる前に、リクエストごとに実行されます。（翻訳）
私的にはコンストラクタ。
bootedコンポーネントがマウントまたはハイドレートされた後、アップデートメソッドが呼ばれる前に、すべてのリクエストで実行されます。（翻訳）
マウントの後とハイドレードの後に呼び出される。
mountコンポーネントのインスタンスが作成された直後、render()がコールされる前に一度だけ実行されます。これは最初のページロード時に一度だけ呼ばれ、たとえコンポーネントが更新されたとしても、再び呼ばれることはありません。（翻訳）
私的には initメソッド。 プロパティの初期値を設定する。
dehydrateコンポーネントのレンダーの後に呼び出される。
この後にコンポーネントが再描画が行われる。例えば dehydrateフック でプロパティの値を変えると、変えた値でコンポーネントが表示される。
私的には create メソッド。
dehydrateFoo↑上の dehydrateフック の後に呼び出される。
defydrateFoo は $foo プロパティが定義されていないと呼び出されない。
hydrateコンポーネントのレンダーの前に呼び出される。
hydrateFoo↑上の hydrateフック の前に呼び出される。
updatingLivewireコンポーネントのデータが更新される前に実行される。（翻訳）
updatedLivewireコンポーネントのデータが更新された後に実行されます。（翻訳）
updatingFoofoo という名前のプロパティが更新される前に実行されます。配列のプロパティは、updatingArray($value, $key)のように、配列内の変更する要素を指定するためにこの関数に渡される追加の$key引数を持ちます。（翻訳）
updatedFoofooというプロパティが更新された後に実行されます。配列のプロパティは、上記のように追加の $key 引数を持ちます。（翻訳）
updatingFooBarfoo プロパティまたは $fooBar や $foo_bar などのマルチワード プロパティのネストされたプロパティ バーを更新する前に実行されます。（翻訳）
updatedFooBarfooプロパティ、または$fooBarや$foo_barなどのマルチワード・プロパティにネストされたプロパティ・バーを更新した後に実行されます。（翻訳）

親コンポーネント

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ParentComponent extends Component
{
  public $name1 = '親から初期値を設定１';
  public $name2 = '親から初期値を設定２';
  public $foo; // 意味無し
  protected $listeners = ['update' => 'onUpdateEvent'];
  public function onUpdateEvent($name,$value)
  {
    \Log::debug(__METHOD__);
    \Log::debug([$name,$value]);
    $this->$name = $value;
  }
  public function boot()                  { \Log::debug(__METHOD__); }
  public function booted()                { \Log::debug(__METHOD__); }
  public function mount()                 { \Log::debug(__METHOD__); }
  public function dehydrate()             { \Log::debug(__METHOD__); }
  public function dehydrateFoo($value)    { \Log::debug(__METHOD__); }
  public function hydrateFoo($value)      { \Log::debug(__METHOD__); }
  public function hydrate()               { \Log::debug(__METHOD__); }
  public function updating($name,$value)  { \Log::debug(__METHOD__); }
  public function updated($name,$value)   { \Log::debug(__METHOD__); }
  public function updatingFoo($value)     { \Log::debug(__METHOD__); }
  public function updatedFoo($value)      { \Log::debug(__METHOD__); }
  public function updatingFooBar($value)  { \Log::debug(__METHOD__); }
  public function updatedFooBar($value)   { \Log::debug(__METHOD__); }
  public function render()
  {
    \Log::debug(__METHOD__);
    return <<<'EOS'
      <div style="padding:1em;background-color:#AFA;">
        親コンポーネント<br>
        <livewire:child-component name="name1" :value="$name1" />
        {{ $name1 }}
      </div>
      EOS;
  }
}

子コンポーネント

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ChildComponent extends Component
{
  public $name;
  public $value;
  public $foo; // 意味無し

  public function boot()                  { \Log::debug(__METHOD__); }
  public function booted()                { \Log::debug(__METHOD__); }
  public function mount()                 { \Log::debug(__METHOD__); }
  public function dehydrate()             {
    \Log::debug(__METHOD__);
    \Log::debug('* emitUp *');
    $this->emit('update',$this->name,$this->value)->up();
  }
  public function dehydrateFoo($value)    { \Log::debug(__METHOD__); }
  public function dehydrateBoo($value)    { \Log::debug(__METHOD__); }
  public function hydrate()               { \Log::debug(__METHOD__); }
  public function hydrateFoo($value)      { \Log::debug(__METHOD__); }
  public function updating($name,$value)  { \Log::debug(__METHOD__); }
  public function updated($name,$value)   { \Log::debug(__METHOD__); }
  public function updatingFoo($value)     { \Log::debug(__METHOD__); }
  public function updatedFoo($value)      { \Log::debug(__METHOD__); }
  public function updatingFooBar($value)  { \Log::debug(__METHOD__); }
  public function updatedFooBar($value)   { \Log::debug(__METHOD__); }
  public function render()
  {
    \Log::debug(__METHOD__);
    return <<<'EOS'
      <div style="padding:1em;background-color:#EFE;">
        子コンポーネント<br>
        <input type="text" wire:model="value">
        Hello {{ $value }}
        <br>
        <button wire:click="click">クリア</button><br>
      </div>
      EOS;
  }
  public function click() {
    \Log::debug(__METHOD__);
    $this->value = 'クリア';
  }
}

画面を表示した時のログ

local.DEBUG: App\Http\Livewire\ParentComponent::boot
local.DEBUG: App\Http\Livewire\ParentComponent::mount
local.DEBUG: App\Http\Livewire\ParentComponent::booted
local.DEBUG: App\Http\Livewire\ParentComponent::render
local.DEBUG: App\Http\Livewire\ChildComponent::boot
local.DEBUG: App\Http\Livewire\ChildComponent::mount
local.DEBUG: App\Http\Livewire\ChildComponent::booted
local.DEBUG: App\Http\Livewire\ChildComponent::render
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrate
local.DEBUG: * emitUp *
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrateFoo
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrate
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrateFoo

テキストボックスに何か入力した時のログ

local.DEBUG: App\Http\Livewire\ChildComponent::boot
local.DEBUG: App\Http\Livewire\ChildComponent::hydrateFoo
local.DEBUG: App\Http\Livewire\ChildComponent::hydrate
local.DEBUG: App\Http\Livewire\ChildComponent::booted
local.DEBUG: App\Http\Livewire\ChildComponent::updating
local.DEBUG: App\Http\Livewire\ChildComponent::updated
local.DEBUG: App\Http\Livewire\ChildComponent::render
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrate
local.DEBUG: * emitUp *
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrateFoo
local.DEBUG: App\Http\Livewire\ParentComponent::boot
local.DEBUG: App\Http\Livewire\ParentComponent::hydrateFoo
local.DEBUG: App\Http\Livewire\ParentComponent::hydrate
local.DEBUG: App\Http\Livewire\ParentComponent::booted
local.DEBUG: App\Http\Livewire\ParentComponent::onUpdateEvent
local.DEBUG: array (
  0 => 'name',
  1 => 'もっす',
)
local.DEBUG: App\Http\Livewire\ParentComponent::render
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrate
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrateFoo

いくつか実験して↓のことを確認しました。
①updating（プロパティ更新前）、updated（プロパティ更新後） フックで親コンポーネントにイベントを送った（emit）。親コンポーネントで イベントを受け取るのは、子コンポーネントのデハイドレートが終わった後。
②「画面を表示した時のログ」と「テキストボックスに何か入力した時のログ」では dehydrateフック で親コンポーネントにイベントを送っている。「画面を表示した時のログ」では onUpdateEvent のイベントは処理されていない。

クリアボタンを押した時のログ

local.DEBUG: App\Http\Livewire\ChildComponent::boot
local.DEBUG: App\Http\Livewire\ChildComponent::hydrateFoo
local.DEBUG: App\Http\Livewire\ChildComponent::hydrate
local.DEBUG: App\Http\Livewire\ChildComponent::booted
local.DEBUG: App\Http\Livewire\ChildComponent::click
local.DEBUG: App\Http\Livewire\ChildComponent::render
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrate
local.DEBUG: * emitUp *
local.DEBUG: App\Http\Livewire\ChildComponent::dehydrateFoo
local.DEBUG: App\Http\Livewire\ParentComponent::boot
local.DEBUG: App\Http\Livewire\ParentComponent::hydrateFoo
local.DEBUG: App\Http\Livewire\ParentComponent::hydrate
local.DEBUG: App\Http\Livewire\ParentComponent::booted
local.DEBUG: App\Http\Livewire\ParentComponent::onUpdateEvent
local.DEBUG: array (
  0 => 'name',
  1 => 'クリア',
)
local.DEBUG: App\Http\Livewire\ParentComponent::render
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrate
local.DEBUG: App\Http\Livewire\ParentComponent::dehydrateFoo

updatedフック、clickメソッドで親コンポーネントにイベントを送る場合、各処理で emit を記述しますが、dehydrate でまとめれば、各処理毎に emit を記述する必要はなさそう。

以上

Scroll to Top