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の更新前後の値をみて何か行いたいときなどに利用できる

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 はいらなくなりそうです。下記のサイトでサンプルコードも交えて説明してあります。

【React】新機能hooks

さいごに

1年離れてただけでいろいろアップデートがあって、キャッチアップがちょっと大変でした。Reactはまだまだ人気のフレームワークですし、定期的にウォッチしていきたいと思います。