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

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!