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
410
Atomic Design とテストの○○な話
takfjp
2
1.6k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.3k
FARM スタックに触れてみる
takfjp
0
1k
React Testing Library の Query について整理してみた
takfjp
0
390
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
370
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
280
meguro.es.pdf
takfjp
0
110
Other Decks in Programming
See All in Programming
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
2k
RubyLSPのマルチバイト文字対応
notfounds
0
120
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
イベント駆動で成長して委員会
happymana
1
340
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
210
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
140
Amazon Qを使ってIaCを触ろう!
maruto
0
420
Jakarta EE meets AI
ivargrimstad
0
380
受け取る人から提供する人になるということ
little_rubyist
0
260
Ethereum_.pdf
nekomatu
0
470
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
97
11k
Site-Speed That Sticks
csswizardry
0
40
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
GraphQLとの向き合い方2022年版
quramy
43
13k
Code Review Best Practice
trishagee
64
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Faster Mobile Websites
deanohume
305
30k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
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!