Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js 消えるライフサイクルメソッドについて

takf
October 10, 2019

React.js 消えるライフサイクルメソッドについて

takf

October 10, 2019
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. React.js 消えるライフサイクルメソッドについて Misoca 秋のLT大会 2019.10.10

  2. 登壇者について furuichi (@takfjp) 株式会社カオナビ所属 主にフロントエンド(React)の開発に携わっています

  3. https://corp.kaonavi.jp/recruit/

  4. Reactのバージョンアップでこれから消えるライフサイクル メソッドについてお話しします ・現在のReactのバージョン  v16.10.0 Released! (2019/10現在) ・v17 の登場はまだ未定

  5. これまでの主な Breaking Changes v16.3 (2018/03) - New Context API, 新しいライフサイクルメソッド追加

    - getDerivedStateFromProps - getSnapshotBeforeUpdate v16.8 (2019/02) - React Hooks が追加! - -> 関数コンポーネントが State を持てるように
  6. 目覚ましい進歩と その裏で消えゆく者たち・・・

  7. componentWillMount componentWillRecieveProps componentWillUpdate 消える(予定)ライフサイクルメソッド

  8. componentWillMount -> UNSAFE_componentWillMount componentWillRecieveProps -> UNSAFE_componentWillRecieveProps componentWillUpdate -> UNSAFE_componentWillUpdate v16.9

    より接頭辞 UNSAFE_ がないと warning v17 で完全に削除 (後方互換性なし) -> 接頭辞つきであればであればv17でも動作 ??
  9. componentWillUnmount 消えずに残る者 まだまだ現役じゃぞい

  10. - v17 より非同期レンダリングを正式にサポート - React Fiber (コアエンジン)が差分の整合性を保つため - componentWillHoge が何度も呼ばれる

    (render() が何度も実 行されてしまう) ことで DOM の整合性が危うくなる なぜ消える?
  11. - 今後も残るライフサイクルメソッドに置き換え - componentWillRecieveProps -> componentDidUpdate など - getDerivedStateFromProps も置き換え策

    - 公式曰く「まれなライフサイクルメソッド」らしい … - ライフサイクルメソッドに依存しない実装 - componentWillMount 内の処理をconstructorに移すなど 対策 (1)
  12. リファクタのコストが高い場合: ❯ npx react-codemod rename-unsafe-lifecycles <path> https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles 対策 (2)

  13. コマンドラインからファイルを指定 -> 廃止予定のメソッド名を自動的に UNSAFE_xxx に置換

  14. Thank you!