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

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

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

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

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

これまでの主な Breaking Changes v16.3 (2018/03) - New Context API, 新しいライフサイクルメソッド追加
- getDerivedStateFromProps - getSnapshotBeforeUpdate v16.8 (2019/02) - React Hooks が追加！ - -> 関数コンポーネントが State を持てるように

目覚ましい進歩とその裏で消えゆく者たち・・・

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

componentWillMount -> UNSAFE_componentWillMount componentWillRecieveProps -> UNSAFE_componentWillRecieveProps componentWillUpdate -> UNSAFE_componentWillUpdate v16.9
より接頭辞 UNSAFE_ がないと warning v17 で完全に削除（後方互換性なし） -> 接頭辞つきであればであればv17でも動作 ??

componentWillUnmount 消えずに残る者まだまだ現役じゃぞい

- v17 より非同期レンダリングを正式にサポート - React Fiber (コアエンジン)が差分の整合性を保つため - componentWillHoge が何度も呼ばれる
(render() が何度も実行されてしまう) ことで DOM の整合性が危うくなるなぜ消える？

- 今後も残るライフサイクルメソッドに置き換え - componentWillRecieveProps -> componentDidUpdate など - getDerivedStateFromProps も置き換え策
- 公式曰く「まれなライフサイクルメソッド」らしい … - ライフサイクルメソッドに依存しない実装 - componentWillMount 内の処理をconstructorに移すなど対策 (1)

リファクタのコストが高い場合： ❯ npx react-codemod rename-unsafe-lifecycles <path> https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles 対策 (2)

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

Thank you!

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

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

takf

More Decks by takf

Other Decks in Programming

Featured

Transcript