Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React.js 消えるライフサイクルメソッドについて
Search
takf
October 10, 2019
Programming
0
110
React.js 消えるライフサイクルメソッドについて
takf
October 10, 2019
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
430
Atomic Design とテストの○○な話
takfjp
2
1.7k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.4k
FARM スタックに触れてみる
takfjp
0
1.1k
React Testing Library の Query について整理してみた
takfjp
0
410
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
380
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
290
meguro.es.pdf
takfjp
0
110
Other Decks in Programming
See All in Programming
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
3
280
Beyond ORM
77web
11
1.6k
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.9k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
Azure AI Foundryのご紹介
qt_luigi
1
210
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
140
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
600
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
300
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
It's Worth the Effort
3n
183
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Being A Developer After 40
akosma
89
590k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
How to train your dragon (web standard)
notwaldorf
89
5.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Typedesign – Prime Four
hannesfritz
40
2.5k
Code Reviewing Like a Champion
maltzj
521
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Transcript
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!