React JavaScriptUIライブラリの新機能

プロダクションリリースで利用可能になったReactJavaScript UIライブラリのバージョン16.8には、クラスを記述せずに状態やその他のReact機能を使用するためのフック機能があります。

Reactをダウンロードする場所

ReactのproductonバージョンはGitHubからダウンロードできます。

現在のバージョン:React16.8の新機能

2019年2月にリリースされたReact168は、ReactのDOM、DOMサーバー、テストレンダラー、および浅いレンダラーのフックの実装を提供します。フックはReactDevToolsでサポートされています。開発者は独自のフックを構築して、コンポーネント間で再利用可能なステートフルロジックを共有できます。しかし、Facebookは開発者にこの機能を使って時間をかけることを勧めており、開発者が「一晩」フックを使用するようにアプリケーションを書き直すことを推奨していません。

Reactからクラスを削除する予定はないため、開発者はいくつかの新しいコンポーネントでフックを試す必要があります。活用フックを使用するコードは、クラスを使用する既存のコードと一緒に機能します。

以前のバージョン:React16.7の新機能

2018年12月にリリースされたReact16.7は、クラスを記述せずに状態やその他のReact機能を使用するためのフック機能を追加します。

フックは、関数コンポーネントからReact状態とライフサイクル機能にリンクする関数です。それらは現在、既存のコードと並行して機能し、段階的な採用を可能にします。Reactから実際にクラスを削除する予定はありません。フックは、Reactのさまざまな問題を解決します。

  • 再利用可能な動作をコンポーネントにアタッチする方法の欠如。これを解決しようとするレンダープロップや高次コンポーネントなどのパターンがありますが、これらにはコンポーネントの再構築が必要であり、煩雑でコードの追跡が困難になる可能性があります。開発者はフックを使用して、コンポーネントからステートフルロジックを抽出し、独立したテストと再利用を行うことができます。
  • 複雑なコンポーネントは理解しにくくなっています。フックを使用すると、サブスクリプションの設定やデータのフェッチなど、関連する部分に基づいてコンポーネントを小さな関数に分割できます。これは、ライフサイクルメソッドに基づいて分割を強制する代わりに行われます。
  • クラスは人と機械の両方を混乱させる可能性があり、Reactを学ぶ上での最大の障壁と見なされています。フックを使用すると、開発者はクラスなしでReactの機能をさらに使用できます。フックは機能を受け入れますが、Reactの精神を犠牲にすることはありません。命令型エスケープハッチへのアクセスが提供されます。開発者は、複雑な機能的またはリアクティブプログラミング手法を学ぶ必要はありません。

以前のバージョン:React16.6の新機能

2018年10月にリリースされたReact16.6は、いくつかの機能拡張を提供します。

  • を使用するとmemo、開発者は関数コンポーネントを使用したレンダリングを回避できます。これは、入力小道具がPureComponentsまたはを使用して同じである場合にクラスコンポーネントがレンダリングを回避できるのと同様shouldComponentUpdateです。
  • を使用するとlazy、開発者はSuspense、への呼び出しで動的インポートをラップすることにより、コード分割にコンポーネントを使用できますReact.lazy()。注:この機能は、サーバー側のレンダリングではまだ使用できません。
  • 便利なAPIは、クラスコンポーネント内からコンテキスト値を消費するために導入されました。開発者は、React16.3の新しいrenderpropAPIをクラスコンポーネントで採用するのは難しいかもしれないと不満を漏らしていました。
  • エラーメソッドはgetDerivedStatefromError()、レンダリングが完了する前にフォールバックUIをレンダリングします。注:サーバー側のレンダリングにはまだ利用できませんが、開発者は準備を始めることができます。
  • 二つのStrictmodeAPIは廃止されました:findDOMNode()レガシーコンテキスト使用contextType とgetChildContext。開発者は、新しいcontextTypeAPIにアップグレードすることをお勧めします。

以前のバージョン:React16.4の新機能

2018年5月下旬にリリースされたReactのバージョン16.4は、ポインターイベントのサポート、頻繁に要求される機能、および今後の非同期レンダリング機能の改善を追加します。ポインタイベントをサポートするブラウザには、Google Chrome、Mozilla Firefox、Microsoft Edge、およびMicrosoft InternetExplorerのバージョンが含まれます。

ポインターイベントは、ポインティングデバイスに対して発生するDOMイベントであり、マウスやタッチなどのデバイスを処理するための単一のイベントモデルを提供するように設計されています。

ポインターイベントのサポートにより、Reactは以下を含むイベントタイプのサポートを追加します。

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

React16.4のその他の新機能は次のとおりです。

  • 計画された非同期レンダリングモードとの互換性が向上しました。これを行うために、リリースにはのバグ修正が含まれていますgetDerivedStatefromProps。これは、更新が行われる理由に関係なく、コンポーネントが必要になるたびに呼び出されるようになりました。コンポーネントが親によって再レンダリングされ、ローカルの結果として起動しない場合にのみ呼び出されていましたsetState。この修正はほとんどのアプリに影響しませんが、まれに、少数のコンポーネントで問題が発生する可能性があります。
  • unstable_Profilerパフォーマンスを測定するために、と呼ばれる実験的なプロファイラーコンポーネントが追加されました。
  • カスタムレンダラーを作成するための実験的な調整機能は、フラットでネストされたオブジェクトを使用しない新しいホスト構成形状を備えています。
  • React DOMの修正には、場合によってはコンテキストの伝播を妨げていたバグの修復や、一部の属性がカスタム要素ノードから誤って削除されていた状況が含まれます。

実験的なコールリターン機能は、バンドルサイズに影響し、APIが十分ではなかったため、Reactバージョン16.4で削除されました。Facebookによると、ある時点で別の形で戻ってくることを期待してください。

以前のバージョン:React16.3の新機能

Reactの2018年3月バージョン16.3リリースは、ライフサイクルの変更とコンテキスト用のAPIをもたらします。

React16.3でのライフサイクルの変更

コンポーネントのライフサイクルでは、次の非同期レンダリングモードにより、クラスコンポーネントAPIモデルが拡張されます。これは、本来意図されていなかった方法で使用されています。そのgetDerivedStateFromPropsため、レガシーライフサイクルのより安全な代替手段として、を含む新しいライフサイクルが追加されていますcomponentWillReceiveProps。またgetSnapshotBeforeUpdate、更新が行われる前のDOMなどのプロパティの安全な読み取りをサポートするために追加されています。

React 16.3は、tocomponentWillMountcomponentWillReceiveUpdate。などのこれらのライフサイクルの一部に「安全でない」プレフィックスも追加します。このような場合、「安全でない」とはセキュリティではなく、これらのライフサイクルを使用するコードにReactの将来のバージョンでバグが発生する可能性が高いという事実を指します。

React 16.3リリースでは、開発者はレガシーメソッドについて何もする必要はありません。このリリースは、オープンソースプロジェクトのメンテナに非推奨の警告の前にライブラリを更新するように促すことを目的としています。この警告は、16.xラインの将来のリリースまで有効になりません。

バージョン16.3は、StrictMode安全でないライフサイクルを持つコンポーネントを識別するコンポーネントを追加します。StrictModeは、開発モードでのみ実行され、レガシー文字列ref APIの使用について警告し、予期しない副作用を検出します。子孫の追加チェックをアクティブにします。より多くの機能が後で追加されます。

Context APIは、静的型チェックと詳細更新をサポートします

新しいコンテキストAPIは、静的型チェックと詳細更新をサポートします。FacebookのReactJSコアチームのメンバーであるBrianVaughn氏は、このAPIは以前の実験的なAPIバージョンよりも効率的であると述べています。コンテキストを使用すると、小道具を手動で渡すことなく、データをコンポーネントツリーに渡すことができます。小道具には、ロケール設定やUIテーマが含まれているものもあります。古いAPIはReact16.xリリースでも引き続き機能し、ユーザーに移行する時間を与えます。

React 16.3の新機能:

  • createrefAPI参照を管理するための、と呼ばれる改善されたAPI 。これは、renderメソッドで開発されたDOMノードまたはReact要素にアクセスする方法を提供します。
  • forwardRefAPIは、コードの再利用を促進高次成分を使用して支援します。

以前のバージョン:React16.2の新機能

React 16.2の2017年11月のリリースでは、コンポーネントのレンダリングメソッドから複数の子を表示するためのサポートを改善するフラグメント機能が提供されています。空のJSXタグに似たフラグメントを使用すると、開発者はDOMにノードを追加せずに子のリストをグループ化できます。

NPMレジストリからバージョン16.2をインストールできます。Yarnパッケージマネージャーを使用してインストールするには、を実行しyarn add [email protected]^16.2.0 [email protected]^16.2.0ます。NPMでインストールするには、を実行しnpm install --save [email protected]^16.2.0 [email protected]^16.2.0ます。

以前のバージョン:React16.0の新機能

開発中に「ReactFiber」と呼ばれた2017年9月のReact16.0は、Reactコアを書き直したもので、新しい調整アルゴリズムを介して複雑なアプリケーションの応答性を向上させます。React16の主な機能は次のとおりです。

  • コンポーネントスタックトレースを特徴とするエラーで、デバッグが容易になります。
  • コンポーネントのレンダリングメソッドから直接文字列/配列を返す。
  • 新しい高速ストリーミングサーバー側レンダラー。
  • よりネイティブに似たアプリケーションパフォーマンス。
  • 物議を醸しているBSD +特許ライセンスからより口当たりの良いMITライセンスへの移行。

Reactの内部はReact16で完全に書き直されましたが、パブリックAPIは「本質的に変更されていません」とFacebookのReactのエンジニアリングマネージャーであるSophieAlpertは述べています。その目的は、開発者がReactで構築された既存のコンポーネントを書き直す必要がないようにすることでした。

React 16の新しいコードは、Facebookでおなじみの方法に従って、GitHubリポジトリの古いコードと一緒に記述されました。2つの間の切り替えは、ブールuseFiber機能フラグを使用して行われました。このプロセスにより、Facebookは既存のユーザーに影響を与えることなく新しい実装の構築を開始し、古いコードベースにバグ修正を続けます。

バグを修正して数か月後、Facebookは、Reactの2つのバージョンを最新の状態に保つのではなく、バグの可能性のあるセットを減らすために単一の製品を提供することを選択しました。