React v16.2 ~ v16.7で入った新機能
ここ1年ぐらい古いverのReactで開発し続けていて、最近ようやく最新のReactに対応したのでここ1年ぐらいでどんな機能が追加されてのかまとめてみることにしました。
※ v16.5, v16.7は大きな機能追加がなかったみたいなので書いてないです
[v16.2] Fragments
Fragmentとはなにかというと、下記のように <>
で括れば、 render
で複数のdomを返却できるようになりました。
render() { return ( <> <p>1111</p> <p>2222</p> <p>3333</p> </> ); }
これまでは <div>
などで括ってて返却しないといけず、不必要なネストが発生してしまっていました。Fragmentのおかげでそういった不必要なネストを作ることなくコンポーネントを作成することができるようになりました。
詳しくは→ React v16.2.0: Fragments機能の改善
[v16.3] 新Lifecyleメソッドとcontext API
新Lifecycle
大きな変更点は以下2つ
- 以下の3つが非推奨(v17で削除される)
componentWillMount
componentWillReceiveProps
componentWillUpdate
- 逃げ道として
UNSAFE_
のprefixがつく別のメソッドが用意される - 移行用のスクリプトも用意されている
- Lifecycleメソッドが2つ追加
- getDerivedStateFromProps
componentWillReceiveProps
の安全な代替。staticメソッド
- getSnapshotBeforeUpdate
- DOMの更新前後の値をみて何か行いたいときなどに利用できる
- getDerivedStateFromProps
Context API
簡単にいうと Redux
など別のライブラリに頼っていた状態管理をreactだけで行えるようになったというものです。
コンポーネントへstateを渡す Provider
、 Provider
からの値を受け取る Consumer
、 Provider
と Consumer
のペアを生成する React.createContext
からなります。
実装例は React Context APIについて を読むとわかりやすいと思います
[v16.4] Pointer Eventsサポート
その名の通り Pointer events をハンドリングできるようになりました。マウス以外のデバイスでもonPointerDown
とかでイベントハンドリングできるようになります。
詳しくは→ React v16.4.0: Pointer Events をサポート
[v16.6]React.memo,React.lazy,static contextType
React.memo
関数コンポーネントを PureComponent
にするにはClassにするか、 recompose
などを使うしかなかったのですが、 React.memo
をつかうと関数コンポーネントを PureComponent
にすることができるようになりました。
const Component = React.memo(() => (
<p>This is pure component!!</p>
))
React.lazy / React.suspese
コンポーネントの遅延ロードを可能にするものです。
import React, {lazy, Suspense} from 'react'; const OtherComponent = lazy(() => import('./OtherComponent')); function MyComponent() { return ( <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> ); }
このコードの例だと、 OtherComponent
が読み込まれるまでは Suspense
の fallback
が表示されるという形です。
lazy
は Promise
を返却する import
をコールバックに渡します。
static contextType
v16.3のContext APIの拡張です。
classコンポーネントの内部でContextを扱うことができるようになりました。
class MyClass extends React.Component { componentDidMount() { let value = this.context; /* perform a side-effect at mount using the value of MyContext */ } componentDidUpdate() { let value = this.context; /* ... */ } componentWillUnmount() { let value = this.context; /* ... */ } render() { let value = this.context; /* render something based on the value of MyContext */ } } MyClass.contextType = MyContext;
詳しくは→ React 16.6の新機能
[v16.7.0-alpha] Hooks
useState
useEffect
useContext
useReducer
useMemo
などさまざまな機能を持った関数が追加になってます。便利な機能群です。ライトなSPAなら Redux
いらなくなるレベルです。とりあえず recompose
はいらなくなりそうです。下記のサイトでサンプルコードも交えて説明してあります。
さいごに
1年離れてただけでいろいろアップデートがあって、キャッチアップがちょっと大変でした。Reactはまだまだ人気のフレームワークですし、定期的にウォッチしていきたいと思います。