✍🏼 ライフサイクルの反応方法を整理します!

2343 ワード
LifeCycleMethod life cycle ライフサイクル はんのう テキストリンク

マウント

  • constructor:素子作成者方法
  • getDerivedStateFromProps:受け取ったアイテムを入れた状態で使う
  • render:レンダリング方法
  • ・componentDidMount:初回レンダリング終了後に呼び出す方法(DOMの外部ライブラリで連動、ajaxリクエスト、読み取りまたは直接DOM属性を変更する必要がある)

    • 更新

  • getDerivedStateFromProps:受け取ったアイテムを入れた状態で使う
  • shouldComponentUpdate:React.Memoのようなキャラクターで、素子が再レンダリングされるかどうかを判断する方法
  • render:レンダリング方法
  • ・getSnapshotBeforeUpdate:更新前のDOM状態を取得して特定の値を返す(スクロール位置決めなどの機能を実現するためのHooksには該当するhookメソッドがない).
  • ・componentDidUpdate:レンダリングが完了して画面に変化を反映して呼び出す方法、3番目のパラメータは上記の方法で返される値を問い合わせることができる

    • インストールされていません

  • componentWillUnmount:素子が画面から消える前に呼び出す

    • エラー処理

  • componentDidCatch:前処理されていないエラーが発生した場合、ユーザーにエラー発生を通知する
    •   componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }
    TIL 39、複数のパラメータ、可変パラメータ関数
    タスク4-html 1