React16.3.0のざっくりまとめ的なお話

発表されたので自分用に簡単なまとめ。

■Official Context API

公式サポートのコンテキストAPI。
今までのコンテキストAPIは16.x.x系では使えるよ的な。

const ThemeContext = React.createContext('light');としてThemeContextを作り、ThemeContext.Providerを使うことでchildren以下に浸透させ、取り出したいところでThemeContext.Consumerとすることでcontextを取り出せる。

Accessing Context in Lifecycle Methods
ここら辺はreduxっぽくてわかりやすいんじゃないかと。
dispatchがないバージョンみたいな感じでサクッとFlux的なことをしたいならばContext APIで十分ぽい。

■createRef API

refは文字列型(ref="hogeRef")とコールバック型(ref={(ref) => {this.hogeRef = ref}})があったんだけど、推奨されてたのはコールバック型。
けどコールバック型だとcomponentDidMount時にrefを扱った処理ができなかったっていう問題点があったんだけど、それを解決するのが今回追加されるやつ。

constructorの中でthis.inputRef = React.createRef();みたいな形にしてあげることで、refが生成されるので、componentDidMount時に諸々できるみたいな。
これは地味に便利。
コールバック型の中でDidMount時にしたい処理をif文付きで書かないといけなかったのをやる必要がなくなるから。

■forwardRef API

HOC作ったときのrefを指定したいよね的なお話。

今までだとHOC作った場合はrefを渡せなかったけど、forwardRefっていうのを使えば渡せるようになる的な。
refを直接渡そうとするとrefはpropsとして受け取れなかったから、componentRef={(ref) => {}}みたいな形で渡す必要があったんだけど、今度からこれでできるからよいみたいな。
ということはもしかしてStyled Componentみたいな形のときにもrefを渡せるようになるのかな？

■Component Lifecycle Changes

ライフサイクルメソッドについて的なお話。
componentWillMount、componentWillReceiveProps、componentWillUpdateがまぁ中々厄介だったりするわけで。
とりあえずcomponentDidMountでfetchしろよとかそういう話。
一応これら3つはバージョン17まで使えるけど非推奨だよ的な。
ちなみに前に以下の記事で諸々述べてた。
https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
で、新しく二つ追加されたメソッドがある。

static getDerivedStateFromProps(nextProps, prevState)

これはcomponentWillReceivePropsの代替的な。
けどstaticメソッドなのでこの中でthis.setState()は使えないわけだけどreturnした値が新しいstateになる感じ。
なのでそれらの役割も果たしたい場合にはcomponentDidUpdate(prevProps, prevState)もちゃんと使いましょう的な。
けど前にcomponentWillReceivePropsが非推奨になるよって言われてからcomponentDidUpdateで作るようにしてるんだけど全然問題ない。
別にreceivePropsでやる必要ないんじゃないかなって最近思ってるのであまり気にする必要ないんじゃないかと。

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdateに第三の引数が加わったよ的な。
componentDidUpdate(prevProps, prevState, snapshot)となったよ的な。
で、それはgetSnapshotBeforeUpdateでreturnした値が渡るよ的な。
なので高さだとかなんとかを返すとかそういう感じになるっぽい。
多分色々と用途があるはずなんだけどまだ思いつかない的な。

■StrictMode Component

Identifying components with unsafe lifecycles -> 非推奨のライフサイクルメソッドの使用
Warning about legacy string ref API usage -> 文字列型refの使用
Detecting unexpected side effects -> ?
これらを注意してくれるらしい。

ってな感じでざっくりと変更点まとめてみた的な。
個人的にはrefとライフサイクルメソッドが中々便利になったなぁと思う。