🕧 🛤️ 🗝️ React 16.3（.0-alpha）の革新 ↩️ 👩🏿‍🏭 🌱

React 16.3-alphaはnpmで公開されており、既にダウンロードして使用できます。今日は、このリリースの最大かつ最も興味深い革新についてお話します。特に、コンテキストAPI、新しいライフサイクルメソッド、静的メソッドgetDerivedStateFromProps 、 StrictModeおよびAsyncMode 、更新されたReact開発者ツールについて説明します。

新しいコンテキストAPI

Context APIは常に不可解なもののように見えました。一方で、これは公式の文書化されたReact APIですが、開発者は、時間の経過とともに変更される可能性があり、意図的に不完全であるため、使用すべきではないと警告されました。このAPIの時代が到来し、RFCフェーズが終了し、間違いなくより使いやすくなった新しいAPIが開発者に利用可能になりました。 ReduxやMobXの「飾り」のないシンプルな状態管理だけが必要な場合は、生活が楽になります。

新しいAPIはReact.createContext()形式で利用でき、2つのコンポーネントを自由に使用できます。

React.createContextコマンドを使用して新しいコンテキストを作成する

ここで、ファクトリー関数を呼び出すことにより、 Provider要素とConsumer要素があるオブジェクトを取得します。

Providerは、その存在の目的が、独自のサブツリー内のすべてのコンポーネントにデータを提供することである特別なコンポーネントです。たとえば、次のようになります。

新しいコンテキストAPIの使用-Context.Provider

ここで、 themeコンテキストを渡すサブツリー（この場合はツリー全体）が選択され、転送する必要がある値が設定されます。もちろん、値は動的にすることができます（つまり、 this.state基づいて）。

次のステップは、 Consumer要素を使用することです。

新しいコンテキストAPIの使用-Context.Consumer

適切なProvider埋め込まずにConsumerをレンダリングすると、 createContext宣言されたデフォルト値が使用されます。
次のことに注意してください。

Consumerコンポーネントは、既に使用されているContextコンポーネントにアクセスできる必要があります。同じ入力パラメーターで新しいコンテキストが作成される場合、これは新しいContextコンポーネントを作成することと同じです。その結果、元のContextコンポーネントにあったデータはConsumerコンポーネントに転送されません。このため、 Contextはコンポーネントとして扱われる必要があります。一度作成してから、必要な場所にエクスポートまたはインポートする必要があります。
新しい構文では、Reactの「子孫としての機能」テンプレート（レンダープロップとも呼ばれます）を使用します。このテンプレートに詳しくない場合は、この資料をご覧ください。
新しいコンストラクトを使用する場合、新しいContext APIを使用する予定であれば、 prop-typesを使用してcontextPropsを指定する必要はなくなりcontextProps 。

関数に渡されたコンテキストのデータは、 Context.providerコンポーネントのプロバイダーに設定されたvalueプロパティに対応し、 Providerコンポーネントのデータを変更すると、このデータのすべてのコンシューマーが再描画されます。

新しいライフサイクルテクニック

RFCの段階から検討中のReactアルファリリースに入った別のイノベーションは、いくつかのライフサイクルメソッドの陳腐化といくつかの新しいメソッドの導入に関係しています。

この変更は、推奨される開発アプローチを導入することを目的としています（これらの関数が扱いにくい理由に関する資料があります）。これは、非同期レンダリングモードが完全にアクティブ化された後に特に重要になりますReact 16）。

しばらくすると非推奨になる機能は次のとおりです。

componentWillMount関数。代わりにcomponentDidMountを使用することが提案されていcomponentDidMount 。
componentDidUpdateが置き換えるcomponentWillUpdate関数。
componentWillReceiveProps関数。新しい静的関数getDerivedStateFromProps 、この関数の代替として提案されています。

上記に照らして、これらの機能は引き続き使用できるため、パニックに陥らないでください。これらの機能が古いという通知はReact 16.4に表示され、それらの削除はReactのバージョン17で計画されています。

React開発者のキャンプでパニック。 ダン・アブラモフは心配しないことを提案しますが、彼の言葉は誰にも影響しません

通知は、新しいStrictModeまたはAsyncModeを使用する場合にのみ表示されますが、これらの場合でも、次の方法を使用して無効にすることができます。

UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

静的メソッドgetDerivedStateFromProps

componentWillReceivePropsは削除されるため、プロパティの変更に基づいて状態を更新するにはいくつかのメカニズムが必要です。この問題を解決するために、新しい静的メソッドを導入することが決定されました。

静的メソッドとは何ですか？これは、インスタンスではなくクラスに存在するメソッドです。このメソッドは、 thisアクセスできず、宣言にstaticれているメソッドとして説明するのがおそらく最も簡単です。

しかし、疑問が生じます。関数がこれにアクセスできない場合、 this.setStateどのように呼び出すのthis.setStateか？答えは、そのようなものを呼び出す必要はないということです。この関数は、更新されたステータスデータのみを返す必要があります。または、更新が不要な場合はnullを返しnull 。

getDerivedStateFromPropsを使用して状態を更新する

返される値は、現在のsetState値とまったく同じように動作します。状態の変更された部分を返すだけで、他のすべての値はsetStateと同じままです。

getDerivedStateFromPropsを使用するための便利なヒント

state状態を初期化することを忘れないでください

状態を初期化することを忘れないでください

コンポーネントの初期状態の初期化をキャンセルした人はいません。これは、コンストラクターで行うか、クラスフィールドを設定して行う必要があります。

▍呼び出し機能getDerivedStateFromProps

問題の関数は、最初のマウント時とコンポーネントの再描画時に呼び出されるため、コンストラクターのプロパティに基づいて状態を作成する代わりに使用できます。

get getDerivedStateFromPropsとcomponentWillReceivePropsの共有中にエラーが発生しました

getDerivedStateFromPropsのみを使用することが推奨される警告

getDerivedStateFromPropsとcomponentWillReceiveProps両方を宣言すると、 getDerivedStateFromProps関数のみがgetDerivedStateFromPropsれ、コンソールに警告が表示されます。

callbackコールバックとcomponentDidUpdateについて

通常、コールバックを使用して、正常な状態更新後に一部のコードが実行されるようにする場合は、コールバックではなくcomponentDidUpdate使用しcomponentDidUpdate 。

static静的キーワードについて

staticを使用しない場合は、代替表記を使用できます。

staticキーワードを使用せずにgetDerivedStateFromPropsを宣言します

新しいStrictModeコンポーネント

Strict Reactモードは、 React.StrictModeで利用可能なコンポーネントによって表されます。アプリケーションのツリーまたはサブツリーに追加できます。

use strictを使用して...ああ、そうではありません。 もちろん、StrictModeコンポーネントを意味します。

StrictMode使用するStrictModeは、このコンポーネントのおかげで、システムがコードが推奨される開発アプローチに準拠することを保証するのに役立つということです。

StrictModeサブツリーに表示される子コンポーネントの1つが上記のメソッド（ componentWillMount ）を使用する場合、開発モードでプロジェクトを開始すると、ブラウザーコンソールにエラーメッセージが表示されます。

StrictModeサブツリーで安全でないライフサイクルメソッドを使用したエラー報告

エラーメッセージは、ライフサイクルメソッドの削除について説明しているRFCを指すようになりました。

新しいAsyncModeコンポーネント

非同期コンポーネントのまだ非アクティブなサポートメカニズムの名前が変更され、その名前がStrictModeコンポーネントの名前と一致するようになりStrictMode 。このコンポーネントはReact.unsafe_AsyncModeで見つけることができます。 AsyncModeを使用すると、 AsyncMode固有の通知もアクティブにStrictModeます。

Reactの非同期コンポーネントについて詳しく知りたい場合は、こちらとこちらをご覧ください。

新しいReact Developer Toolsバージョン

上記の革新に加えて、私たちが話しているReactリリースでは、新しいコンポーネントのデバッグをサポートする開発者ツールの新しいバージョンが導入されました。

Chromeを使用する場合、Chromeウェブストアの対応する拡張機能はまだ更新されておらず、古いツールを使用して新しいコードをデバッグしようとすると...興味深い結果につながるため、少し待つ必要があります。