1 of 14

React.js

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

Misoca 秋のLT大会 2019.10.10

2 of 14

登壇者について

furuichi (@takfjp)

​

株式会社カオナビ所属

​

主にフロントエンド(React)の開発に携わっています

3 of 14

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

4 of 14

Reactのバージョンアップでこれから消えるライフサイクルメソッドについてお話しします

・現在のReactのバージョン

　v16.10.0 Released! (2019/10現在)

​

・v17 の登場はまだ未定

5 of 14

これまでの主な Breaking Changes

v16.3 (2018/03)

  • New Context API, 新しいライフサイクルメソッド追加
    • getDerivedStateFromProps
    • getSnapshotBeforeUpdate

​

v16.8 (2019/02)

  • React Hooks が追加！
  • -> 関数コンポーネントが State を持てるように

6 of 14

目覚ましい進歩と

その裏で消えゆく者たち・・・

7 of 14

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

componentWillMount

​

componentWillRecieveProps

​

componentWillUpdate

8 of 14

componentWillMount -> UNSAFE_componentWillMount

componentWillRecieveProps -> UNSAFE_componentWillRecieveProps

componentWillUpdate -> UNSAFE_componentWillUpdate

​

v16.9 より接頭辞 UNSAFE_ がないと warning

​

​

​

​

​

​

v17 で完全に削除 （後方互換性なし）

-> 接頭辞つきであればであればv17でも動作 ??

​

9 of 14

消えずに残る者

componentWillUnmount

まだまだ現役じゃぞい

10 of 14

なぜ消える？

  • v17 より非同期レンダリングを正式にサポート🎉

​

  • React Fiber (コアエンジン)が差分の整合性を保つため
    • componentWillHoge が何度も呼ばれる (render() が何度も実行されてしまう) ことで DOM の整合性が危うくなる

11 of 14

対策 (1)

  • 今後も残るライフサイクルメソッドに置き換え
    • componentWillRecieveProps -> componentDidUpdate など
    • getDerivedStateFromProps も置き換え策
      • 公式曰く「まれなライフサイクルメソッド」らしい…

​

​

  • ライフサイクルメソッドに依存しない実装
    • componentWillMount 内の処理をconstructorに移すなど

​

12 of 14

対策 (2)

リファクタのコストが高い場合：

​

❯ npx react-codemod rename-unsafe-lifecycles <path>

​

​

​

https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles

13 of 14

コマンドラインからファイルを指定

-> 廃止予定のメソッド名を自動的に UNSAFE_xxx に置換

14 of 14

Thank you!

🥳