欠けていたReactの紹介

Reactは、世界で最も人気のあるJavaScriptライブラリです。しかし、このライブラリは人気があるので良くありませんが、良いので人気があるからです。既存のReact入門チュートリアルのほとんどは、このライブラリの使用方法の例から始まります。しかし、これらのガイドは、Reactが正しい選択である理由については何も述べていません。



このアプローチには長所があります。Reactをマスターしながらすぐに練習しようと努力する人は、公式ドキュメントを調べてビジネスに取り掛かるだけです。 この資料（ここでは、興味がある場合は、そのビデオバージョン）は、次の質問に対する答えを見つけたい人のために書かれています。Reactがこのように機能するのはなぜですか？React APIがそのように設計されているのはなぜですか？」

なぜ反応するのですか？

コンポーネントがネットワーク通信、アプリケーションのビジネスロジック、またはその状態を認識していないと、作業が楽になります。同じ入力パラメータを受け取るこのようなコンポーネントは、常に同じ視覚要素を形成します。



Reactライブラリが登場すると、JavaScriptフレームワークとライブラリの動作方法が根本的に変わりました。他の同様のプロジェクトがMVC、MVVMなどのアイデアを推進した一方で、Reactは異なるアプローチを採用しました。つまり、ここでは、アプリケーションのビジュアルコンポーネントのレンダリングは、モデルの表示から分離されています。 Reactのおかげで、完全に新しいアーキテクチャがJavaScriptフロントエンドエコシステムに登場しました-Flux。



Reactチームがこれを行ったのはなぜですか？ MVCアーキテクチャやjQueryで記述されたスパゲッティコードなど、このアプローチが以前のアプローチよりも優れているのはなぜですか？これらの質問に興味がある場合は、FacebookでJavaScriptアプリケーション開発に関するこの2013年の講演をご覧ください。



2013年、Facebookはチャットプラットフォームへの本格的な統合作業を完了しました。この新機能はプロジェクトのほぼすべてのページに組み込まれており、チャットはプラットフォームでの作業の通常のシナリオに影響を与えました。これは、以前は簡単ではなかった別のアプリケーションに埋め込まれた複雑なアプリケーションでした。 Facebookチームは、制御されていないDOMミューテーションと、新しい環境で同時非同期ユーザーエクスペリエンスを提供する必要性に対処するという、重要な課題に対処する必要がありました。



たとえば、いつでも理由を問わず、何かがDOMにアクセスしてそこで変更を加えることができる状況で、画面に何が表示されるかを事前にどのように知ることができますか？ユーザーに表示されるものが正しくプロットされていることを確認するにはどうすればよいですか？



Reactの前に存在していた人気のあるフロントエンドツールを使用すると、そのようなことは保証できませんでした。初期のWebアプリケーションでは、DOMの「レース状態」が最も一般的な問題の1つでした。



決定論の欠如=並列計算+可変状態。



^{Martin Oderski}



React開発チームの主なタスクは、この問題を解決することでした。彼らは2つの主要な革新的なアプローチでそれを扱いました：

• Fluxアーキテクチャを使用した単方向データバインディング。
• コンポーネント状態の不変性。コンポーネントの状態が設定されると、それを変更することはできなくなります。状態の変更は、レンダリングされたコンポーネントには影響しません。代わりに、そのような変更は、新しい状態の新しいビューの出力につながります。

概念的な観点から、コンポーネントを構造化およびレンダリングするために私たちが見つけた最も簡単な方法は、単純にゼロミューテーションを目指すことでした。



^{Tom Ochchino、JSConfUS 2013}



Reactライブラリは、Fluxアーキテクチャを使用することにより、制御されていない変異の問題を劇的に減らすことができました。イベントハンドラーをアタッチして、任意の数の任意のオブジェクト（モデル）へのDOM更新をトリガーする代わりに、Reactライブラリは、開発者にコンポーネントの状態を管理する唯一の方法を提供しました。これは、データウェアハウスに影響を与えるアクションのディスパッチです。ストアの状態が変化すると、システムはコンポーネントにレンダリングを要求します。





フラックスアーキテクチャ



Reactに注意を払う必要がある理由を尋ねられたとき、私は簡単な答えを出します。「要点は、ビューの決定論的レンダリングが必要であり、Reactはこのタスクをはるかに簡単にします。」



一部のロジックを実装するためにDOMからデータを読み取ることは、反パターンであることに注意してください。これを行う人は誰でも、Reactを使用する目的に反します。代わりに、データをストアから読み取る必要があり、対応するコンポーネントをレンダリングする前に、そのデータに基づいて決定を行う必要があります。



コンポーネントの決定論的レンダリングがReactの唯一のことである場合、それだけでも大きな革新になります。しかし、React開発チームはそれだけではありません。このチームは、他の興味深いユニークな機能を備えたライブラリを世界に提供しました。そして、プロジェクトが発展するにつれて、Reactはさらに便利なものを追加しました。

JSX

JSXは、ユーザーインターフェイスコンポーネントを宣言的に作成できるようにするJavaScript拡張機能です。JSXには、次の注目すべき機能があります。

• 単純な宣言的マークアップを適用します。
• マークアップコードは、コンポーネントコードと同じ場所にあります。
• ( — ). , , ( — HTML, CSS, JavaScript).
• DOM.
• , React-. , React , ( , , React Native, , Netflix Gibbon, Canvas/WebGL-, react-html-email).

JSXが登場する前に、インターフェイスを宣言的に記述する必要があった場合、HTMLテンプレートを使用せずにそれを行うことは不可能でした。当時、そのようなテンプレートを作成するための一般的に受け入れられている標準はありませんでした。各フレームワークは独自の構文を使用しました。この構文は、たとえば、一部のデータをループしたり、変数からテキストテンプレートに値を埋め込んだり、表示するインターフェイスコンポーネントと表示しないインターフェイスコンポーネントを決定したりする必要がある人が学習する必要がありました。



今日、さまざまなフロントエンドツールを見ると*ngFor、Angularのディレクティブのような特別な構文なしでは実行できないことがわかります。ただし、JSXはJavaScriptのスーパーセットと呼ぶことができるため、JSXマークアップを作成すると、既存のJS機能を利用できます。



たとえば、メソッドを使用して要素のセットを反復処理できますArray.prototype.map。論理演算子を使用し、3値演算子を使用して条件付きレンダリングを整理できます。純粋な関数を使用でき、テンプレートリテラルを使用して文字列を作成できます。一般に、すべてのJavaScript機能は、JSXのインターフェイスを説明するユーザーが利用できます。これは、他のフレームワークやライブラリに対するReactの大きな利点だと思います。



JSXコードのサンプルは次のとおりです。

const ItemList = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>
        <div>{item.name}</div>
      </li>
    ))}
  </ul>
);

確かに、JSXを使用するときは、最初は異常に見えるかもしれないいくつかの機能を考慮する必要があります。

• , , HTML. , class className. camelCase.
• , , , JSX- key. . id, key.

Reactは、開発者にCSSを操作する唯一の正しい方法を課しません。たとえば、スタイルを含むJavaScriptオブジェクトをプロパティに書き込むことで、コンポーネントに渡すことができますstyle。このアプローチでは、おなじみのスタイル名のほとんどが、同等のcamelCaseに置き換えられます。しかし、スタイルを操作する可能性はこれに限定されません。実際には、Reactアプリケーションのスタイリングにさまざまなアプローチを同時に使用しています。どのアプローチを選択するかは、スタイルを設定する方法によって異なります。たとえば、グローバルスタイルを使用してアプリのテーマとページレイアウトのスタイルを設定し、ローカルスタイルを使用して特定のコンポーネントの外観をカスタマイズします。



これが私のお気に入りのReactスタイリング機能です。

• CSS-, . , . — , .
• CSS- — CSS- . JavaScript-. CSS-, . Next.js, , .
• スタイル・JSXパッケージあなたに直接スタイルを宣言することができ、コンポーネントのコードを反応します。これは<style>、HTMLでタグを使用するのと似ています。そのようなスタイルの範囲は「ハイパーローカル」と呼ぶことができます。重要なのは、スタイルは、適用される要素とその子にのみ影響するということです。Next.jsを使用する場合、styled-jsxパッケージは、自分で接続して構成する必要なしに使用できます。

合成イベント

Reactは、SyntheticEvents合成イベントを表し、作業をDOMイベントと統合するように設計されたクロスブラウザーラッパーを提供します。合成イベントは、いくつかの理由で役立ちます。

1. , . .
2. . , , , JavaScript HTML, . . , , React- .
3. . . , , . , , , . . , . , JavaScript, .

イベントプールのため、非同期関数から合成イベントのプロパティにアクセスできないことに注意してください。このような作業スキームを実装するには、イベントオブジェクトからデータを取得し、非同期関数にアクセスできる変数に書き込む必要があります。

コンポーネントのライフサイクル

Reactコンポーネントのライフサイクルの概念は、コンポーネントの状態を保護することに重点を置いています。コンポーネントの状態は、表示中に変更しないでください。これは、次の作業スキームによって実現されます。コンポーネントが特定の状態にあり、レンダリングされている。そして、ライフサイクルイベントのおかげで、それにエフェクトを適用することが可能になり、その状態に影響を与えたり、イベントを操作したりすることができます。



Reactコンポーネントのライフサイクルを理解することは、インターフェイスを開発すると同時にReactと戦うのではなく、開発者が意図したとおりにこのライブラリを使用するために非常に重要です。コンポーネントの状態を誤って変更したり、DOMからデータを読み取ったりするなど、Reactとの「戦い」は、このライブラリの長所を打ち消します。



Reactでは、バージョン0.14以降、コンポーネントのライフサイクルイベントを処理できるクラスベースのコンポーネント記述構文がありました。Reactコンポーネントのライフサイクルには、マウント、更新、アンマウントの3つの重要な段階があります。





コンポーネントのライフサイクル



更新段階は、レンダリング（レンダリング）、プリコミット（DOMツリーに変更を加える準備）、コミット（DOMツリーに変更を加える）の3つの部分に分けることができます。





更新段階の構造



コンポーネントのライフサイクルのこれらの段階について詳しく見ていきましょう。

• Render — . render() , . , JSX.
• Precommit — DOM, getSnapShotBeforeUpdate. , , .
• コミット-コンポーネントのライフサイクルのこのフェーズで、ReactはDOMとrefを更新します。ここでは、メソッドcomponentDidUpdateまたはフックを使用できますuseEffect。ここで、エフェクトの実行、更新のスケジュール設定、DOMの使用、およびその他の同様のタスクを実行できます。

Dan Abramovは、コンポーネントのライフサイクルメカニズムがどのように機能するかを示す優れた図を作成しました。





Reactコンポーネントのライフサイクル



コンポーネントを長寿命のクラスとして表すことは、Reactの最良のメンタルモデルではないと思います。 Reactコンポーネントの状態は変化してはならないことに注意してください。廃止された状態は、新しい状態に置き換える必要があります。このような置換のたびに、コンポーネントが再レンダリングされます。これにより、Reactは、間違いなく最も重要で最も価値のある機能、つまりコンポーネントのビジュアルをレンダリングするための決定論的アプローチのサポートを提供します。



この動作は、次のように考えるのが最適です。コンポーネントがレンダリングされるたびに、ライブラリはJSXを返す決定論的関数を呼び出します。この関数は、それ自体で独自の副作用を引き起こしてはなりません。しかし、彼女はそれが必要な場合、そのような効果を実行するためにReactにリクエストを渡すことができます。



言い換えると、ほとんどのReactコンポーネントを、入力パラメーターを受け取り、JSXを返す純粋な関数と考えるのは理にかなっています。純粋な関数には次の機能があります。

• 同じ入力が与えられると、それらは常に同じ出力を返します（それらは決定論的です）。
• 副作用はありません（つまり、ネットワークリソースでは機能せず、コンソールに何も出力せず、何も書き込みませんlocalStorage）。

コンポーネントが機能するために副作用が必要な場合は、小道具を介してコンポーネントに渡されたアクションクリエーターuseEffectを使用または参照し、コンポーネントの外部で副作用を処理できるようにすることで、副作用を実行できることに注意してください。

反応フック

React 16.8では、Reactフックと呼ばれる新しい概念が導入されています。これらは、クラス構文を使用せずに、コンポーネントライフサイクルメソッドに依存せずに、コンポーネントライフサイクルイベントに接続できるようにする関数です。その結果、クラスの形ではなく、関数の形でコンポーネントを作成することが可能になりました。



一般に、フックを呼び出すと、副作用が発生します。これにより、コンポーネントがその状態およびI / Oサブシステムと連携できるようになります。副作用は、関数によって返される値の変更を除いて、関数の外部に表示される状態の変更です。



フックuseEffect後で実行するために副作用をキューに入れることができます。これらは、コンポーネントのライフサイクルの適切なタイミングで呼び出されます。この時間は、コンポーネントがマウントされた直後（たとえば、componentDidMountライフサイクルメソッドが呼び出されたとき）、コミットフェーズ中（componentDidUpdateメソッド）、コンポーネントがマウント解除される直前（componentWillUnmount）に発生する可能性があります。



1つのフックに関連付けられた3つのコンポーネントライフサイクルメソッドがあることに注意してください。ここでのポイントは、フックを使用すると、コンポーネントのライフサイクルのさまざまな方法に従って、関連するロジックを組み合わせることができ、以前のように「レイアウト」することはできません。



多くのコンポーネントは、マウント中に何らかのアクションを実行する必要があり、コンポーネントが再描画されるたびに何かを更新する必要があり、メモリリークを防ぐために、コンポーネントをアンマウントする直前にリソースを解放する必要があります。使用のおかげで、useEffectこれらのタスクはすべて、ソリューションを3つの異なるメソッドに分割することなく、コードをそれらに関連しないがこれらのメソッドを必要とする他のタスクのコードと混合することなく、1つの関数で解決できます。



Reactフックが提供するものは次のとおりです。

• これらを使用すると、クラスではなく関数として表されるコンポーネントを作成できます。
• コードをより適切に整理するのに役立ちます。
• これらにより、異なるコンポーネント間で同じロジックを簡単に共有できます。
• 新しいフックは、既存のフックを作成することで作成できます（他のフックから呼び出します）。

一般に、クラスベースのコンポーネントではなく、機能コンポーネントとフックを使用することをお勧めします。機能コンポーネントは通常、クラスベースのコンポーネントよりもコンパクトです。彼らのコードはよりよく整理され、より読みやすく、より再利用可能で、テストがより簡単です。

コンテナコンポーネントとプレゼンテーションコンポーネント

コンポーネントのモジュール性とその再利用性を向上させるために、私は2種類のコンポーネントの開発に焦点を当てています。

• コンテナコンポーネントは、データソースに接続され、副作用を引き起こす可能性のあるコンポーネントです。
• プレゼンテーションBeanは、ほとんどの場合、同じ小道具とコンテキストが与えられると、常に同じJSXを返す純粋なBeanです。

純粋なコンポーネントを基本クラスReact.PureComponentと混同しないでください。これは、純粋でないコンポーネントを作成するために使用するのは安全ではないため、そのように名付けられています。

▍プレゼンテーションコンポーネント

プレゼンテーションコンポーネントの機能を検討してください。

• それらはネットワークリソースと相互作用しません。
• データをlocalStorageそこに保存したり、そこからロードしたりすることはありません。
• 彼らはいくつかの予測できないデータを提供しません。
• これらは、現在のシステム時刻を直接参照しません（たとえば、メソッドを呼び出すことによってDate.now()）。
• これらは、アプリケーションの状態ストアと直接対話しません。
• - , , , .

プレゼンテーションコンポーネントについて話すときに、これらがほとんど純粋なコンポーネントであると述べたのは、このリストの最後の項目のためです。これらのコンポーネントは、グローバルReact状態から状態を読み取ります。したがって、フックのように、特定の暗黙的なデータ（つまり、署名関数で記述されていないデータ）をフックuseStateにuseReducer提供します。これは、技術的な観点から、そのようなコンポーネントを「クリーン」とは呼べません。それらを本当にクリーンにする必要がある場合は、状態を管理するすべてのタスクをコンテナコンポーネントに委任できますが、少なくともコンポーネントの正しい動作がモジュラーを使用して確認できるまでは、これを行うべきではないと思います。テスト。



善の敵を最高に。



^{ヴォルテール}

▍コンテナコンポーネント

コンテナコンポーネントは、状態の管理、I / O操作の実行、または副作用となる可能性のあるその他のタスクを担当するコンポーネントです。自分でマークアップをレンダリングする必要はありません。代わりに、レンダリングタスクをプレゼンテーションコンポーネントに委任し、それら自体がそのようなコンポーネントのラッパーとして機能します。典型的には、容器内の成分が+ Reduxのアプリケーション単に呼び出しに反応mapStateToProps()し、mapDispatchToProps()次いで、プレゼンテーションコンポーネントに適切なデータを渡します。コンテナは、以下で説明するいくつかの一般的なタスクにも使用できます。

高次コンポーネント

高次コンポーネント（HOC）は、他のコンポーネントを受け取り、元のコンポーネントに基づいて新しい機能を実装する新しいコンポーネントを返すコンポーネントです。



高次コンポーネントは、一部のコンポーネントを他のコンポーネントでラップすることによって機能します。ラッパーコンポーネントは、いくつかのロジックを実装し、DOM要素を作成できます。ラップされたコンポーネントに追加の入力パラメーターを渡す場合と渡さない場合があります。



Reactフックやレンダリング小道具とは異なり、高次コンポーネントは、関数構成への標準的なアプローチを使用した構成に適しています。これにより、アプリケーションのさまざまな場所での使用を目的とした機能の構成の結果を宣言的に記述することができます。同時に、既製のコンポーネントは特定の可能性の存在を認識してはなりません。EricElliottJS.comのHOCの例を次に示します。

import { compose } from 'lodash/fp';
import withFeatures from './with-features';
import withEnv from './with-env';
import withLoader from './with-loader';
import withCoupon from './with-coupon';
import withLayout from './with-layout';
import withAuth from './with-auth';
import { withRouter } from 'next/router';
import withMagicLink from '../features/ethereum-authentication/with-magic-link';

export default compose(
  withEnv,
  withAuth,
  withLoader,
  withLayout({ showFooter: true }),
  withFeatures,
  withRouter,
  withCoupon,
  withMagicLink,
);

ここに示されているのは、サイトのすべてのページで共有されている多くの機能の組み合わせです。つまり、withEnv環境変数から設定を読み取りwithAuth、GitHub認証メカニズムを実装し、withLoaderユーザーデータの読み込み中にアニメーションを, withLayout({ showFooter: true })表示し、フッター付きの標準レイアウトを表示し、withFeature設定を表示しwithRouter、ルーターを読み込み、withCouponクーポンの操作を担当しwithMagicLing、パスワードを使用せずにユーザー認証をサポートします。魔法。



ちなみに、パスワード認証は時代遅れで危険な慣行であることを考えると、最近では他のユーザー認証方法を使用する価値があります。



前述のサイトのほとんどすべてのページは、これらすべての機能を利用しています。それらが高次のコンポーネントによって構成されていることを考えると、1行のコードですべてをコンテナーコンポーネントに含めることができます。たとえば、チュートリアルページの検索方法は次のとおりです。

import LessonPage from '../features/lesson-pages/lesson-page.js';
import pageHOC from '../hocs/page-hoc.js';
export default pageHOC(LessonPage);

これらの高次コンポーネントには代替手段がありますが、これは「運命のピラミッド」と呼ばれる疑わしい構造であり、使用しないのが最適です。これはそれがどのように見えるかです：

import FeatureProvider from '../providers/feature-provider';
import EnvProvider from '../providers/env-provider';
import LoaderProvider from '../providers/loader-provider';
import CouponProvider from '../providers/coupon-provider';
import LayoutProvider from '../providers/layout-provider';
import AuthProvider from '../providers/auth-provider';
import RouterProvider from '../providers/RouterProvider';
import MagicLinkProvider from '../providers/magic-link-provider';
import PageComponent from './page-container';

const WrappedComponent = (...props) => (
  <EnvProvider { ...props }>
    <AuthProvider>
      <LoaderProvider>
        <LayoutProvider showFooter={ true }>
          <FeatureProvider>
            <RouterProvider>
              <CouponProvider>
                <MagicLinkProvider>
                  <YourPageComponent />
                </MagicLinkProvider>
              </CouponProvider>
            </RouterProvider>
          </FeatureProvider>
        </LayoutProvider>
      </LoaderProvider>
    </AuthProvider>
  </EnvProvider>
);

そして、これはすべてのページで繰り返される必要があります。また、この構造で何かを変更する必要がある場合は、それが存在する場所であればどこでも変更を加える必要があります。このアプローチの欠点は非常に明白だと思います。



コンポジションを使用して一般的な問題を解決することは、アプリケーションコードの複雑さを軽減するための最良の方法の1つです。作曲はとても重要なので、私もそれについて本を書きました。

結果

• なぜ反応するのですか？Reactは、一方向のデータバインディングとコンポーネントの不変状態に基づいて、コンポーネントの視覚的表現を決定論的にレンダリングします。
• JSXを使用すると、JavaScriptコードでインターフェイスを簡単に宣言的に記述することができます。
• - .
• . , . , DOM DOM.
• React , . , , .
• - . - .
• , . ( , ).

?

このReactの記事では、多くの機能的なプログラミングの概念について説明しました。 Reactアプリケーション開発の原則を深く理解するために努力している場合は、純粋な関数、不変性、関数のカレーと部分的なアプリケーション、関数の構成についての知識を磨くことが役立ちます。関連資料はEricElliottJS.comにあります。



ReactをRedux、Redux-Saga、およびRITEwayと組み合わせて使用​​することをお勧めします。AutoduxおよびImmerでの使用にはReduxをお勧めします..。複雑な状態スキームを整理するには、Redux-DSMを使用してみてください。



基本を理解し、実際のReactアプリを構築する準備ができたら、Next.jsとVercelを見てください。これらのツールは、プロジェクトビルドシステムとCI / CDパイプラインの構成を自動化するのに役立ち、サーバー上で最適化された展開のためにプロジェクトを準備するのに役立ちます。これらはDevOpsチーム全体と同じ効果がありますが、完全に無料で使用できます。



Reactアプリケーションを開発するときにどの補助ツールを使用しますか？