Reactガイドを読んでいくその192

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

合成イベント (SyntheticEvent)

イベントのプール

SyntheticEventはプールされる。
また、再利用されnullでコールバックが呼び出された後に初期化される。
ここで初期化される理由はパフォーマンスによるもので、非同期処理の中でイベントのオブジェクトにアクセスすると言った使い方はできない。
例

function onClick(event) {
  console.log(event); // => null で初期化されるオブジェクト
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // これは動作しません。this.state.clickEvent は null 値のみを持つオブジェクトらしい。
  this.setState({clickEvent: event});

  // イベントプロパティをエクスポートすることは可能です。
  this.setState({eventType: event.type});
}

今日はここまで。