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
380
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
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
3k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
540
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
270
受け取る人から提供する人になるということ
little_rubyist
0
180
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
100
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
Click-free releases & the making of a CLI app
oheyadam
2
100
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
イベント駆動で成長して委員会
happymana
1
260
ヤプリ新卒SREの オンボーディング
masaki12
0
110
Quine, Polyglot, 良いコード
qnighy
4
620
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
How to Ace a Technical Interview
jacobian
276
23k
Optimizing for Happiness
mojombo
376
69k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
What's in a price? How to price your products and services
michaelherold
243
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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!