Reactチュートリアル：開始方法と比較方法

公開: 2022-03-11

特にフロントエンドとJavaScriptは奇妙な世界です。 毎日展開されている新しいものの量は、彼らと一緒に働いていない人々、そして多くの人々によって嘲笑されることがよくあります。 それでも、新しい情報、図書館、議論に少し圧倒されることがあります。もう少し長く滞在できる船の安全な避難所のように、安定したものが必要です。 最近、Reactは、動的なJavaScriptの進化の海にあるこの従順な港のようです。

そのことを念頭に置いて、このマルチパートReactチュートリアルを作成し、その機能を紹介し、AngularやVueJSと比較することにしました。

JavaScriptコードの海の上にはっきりと表示された灯台としてのReactのイラスト

もちろん、Reactは私たちが使用できる唯一の港ではありませんが、現時点では、最も人気があり、安定していて革新的なソリューションの1つであり、まだ多くのアップグレードがありますが、それよりも改善の選択肢があります。機能の必要性よりも。

2019年のReactの状態

Reactは、FaxJsと呼ばれる最初のプロトタイプがFacebookページに表示された2011年にさかのぼることができるビューライブラリです。React自体は、JSConfUSでJordan Walke（前述のプロトタイプの作成者でもあります）によって紹介されました。 2013年5月29日、2013年7月2日にGitHubで公開されました。

会議がコミュニティを拡大し、Reactを普及させるように見え始めたとき、Reactは2014年も人気を博し続けました。 しかし、私の観点からは、2015年はReactにとって画期的な年でした。大企業（AirbnbやNetflixなど）はReactソリューションを好み、採用し始めました。 また、その年にReactNativeが登場しました。 React Nativeの背後にある考え方は、まったく新しいものではありませんでしたが、特にFacebookに支えられているため、見るのは面白かったです。

もう1つの大きな変更は、Fluxの実装であるReduxでした。 これにより、状態管理がより親しみやすく簡単になり、これまでで最も成功した実装になりました。

それから現在まで、Reactツール、コアアルゴリズムの書き換え、Fiber、セマンティックバージョニングへの変更など、他にもたくさんのものが利用可能になりました。 今日に向けて、私たちは16.6.3にいます。おそらく、フック付きの新しいバージョンが利用可能になる数週間前です（16.7.0であるはずでしたが、React.lazyのいくつかの修正により、すでにリリースされています）。 Reactはよく知られていて安定していて、素晴らしい意見を得ています。

しかし、Reactとは何ですか？

さて、あなたがフロントエンドの開発者であり、まだそれについて聞いたことがないのであれば、それはかなりの偉業なので、おめでとうございますと言う必要があります。

冗談はさておき、Reactは宣言型のコンポーネントベースのビューライブラリであり、UIの構築に役立ちます。 これはフレームワークではなくライブラリですが、最初は多くの人が後者と表現していました。

明らかに、ReduxやReact Routerなどを追加しようとすると、通常のシングルページアプリケーションを作成するために必要なものがすべて揃っているため、ライブラリではなくフレームワークとして誤解されることがあります。 。 どちらかといえば、その環境のすべてのコンポーネントを合わせると、「フレームワーク」という用語はある程度適切であると主張できますが、それ自体では、Reactは単なるライブラリです。

命名法にとどまり、Reactの違い、開始前にはなかったものに焦点を当てましょう。 まず、Reactについて最初に考えるとき、JSXを思い浮かべます。これは、コードを見るときに最初に目にするものだからです。 JSXは、HTML/XMLにいくぶん似ているJavaScript構文拡張機能です。 ReactとJSXに関しては、HTMLとはいくつかの違いがあります。たとえば、ReactのクラスはclassNameであり、tabindexはありませんがtabIndexであり、スタイルはcamelCasedプロパティを持つJavaScriptオブジェクトを受け入れます。

いくつかの小さな違いがありますが、誰もがすぐにそれらを拾う必要があります。 イベント処理は、たとえば、イベントを処理するための関数をアタッチするために使用できるonChange属性とonClick属性を介して行われます。 また、後でコンポーネントを自由に再利用したり、小道具を使用してカスタマイズしたりできるため、まったく同じコードを数回作成する必要はありません。

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

ただし、実際にはJSXはReactで絶対に必要というわけではありません。 JSXを使用せずに、通常の関数を記述して要素を作成できます。 上記と同じコードを以下のように使用できます。

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

明らかに、このような構文を使用することはお勧めしませんが、便利な場合もあります（たとえば、非常に小さなものを導入したいが、ビルド環境を変更したくない場合など）。

実際、上記のスニペットを表示した理由はもう1つあります。 多くの場合、開発者は、次のことを行う必要がある理由を理解していません。

 import React from 'react';

スニペットは自明である必要があります。 Componentを抽出していますが、BabelはJSXの上からReact.createElementの下にトランスパイルするため、Reactが必要です。 したがって、Reactをインポートしないと、失敗するだけです。 私はBabelについて言及しました。これは、JavaScriptにまだ含まれていないもの（またはブラウザーに含まれているもの）や、JavaScriptの拡張機能（またはBabelがBabel 7からサポートしているTypeScriptなどのさまざまな言語）を紹介するのに役立つツールです。 Babelに感謝します：

  • JSXはブラウザが理解できる機能になります。
  • ブラウザにはまだない新機能（クラスプロパティなど）を使用できます。
  • 古いブラウザのサポートを維持しながら、新しいブラウザにはあるが古いブラウザにはない機能を追加できます。

要するに、明日は今日JavaScriptです。 これはおそらく独自の記事を必要とするものです。 Reactのインポートは、他の手法（Webpackを介したProvidePluginの導入など）でもバイパスできることに注意してください。ただし、ここではスペースが限られているため、Reactのインポートを回避し、ユーザーがCreate React Appを使用することを想定しています（ CRA）（このツールの詳細については後で説明します）。

2番目に重要なこと、そしてJSX自体よりもはるかに重要なことは、Reactが仮想DOMに基づいていることです。 つまり、仮想DOMは、開発者が作成したJavaScriptで表される理想的なツリーのメモリであり、後で実際のDOMと比較され、調整と呼ばれるプロセスで同期されます。

ReactはAngularやVueと比較してどうですか？

特にナシとリンゴを比較することを余儀なくされている場合（ライブラリとフレームワークなど）、ライブラリを比較するのは非常に嫌いです。

したがって、 「テンプレートではなくJSXを使用しているため、XはYよりも優れているため、技術的なこととはあまり関係のない一連の短い質問と回答を使用して、ReactとAngularおよびVueを比較してみます。 」 このようなポイントは通常、個人的な好みであり、主観的な選択です。 また、速度、メモリ割り当てなどは、Reactとそのすべての主要な競合他社で非常に似ています（AngularとVueが思い浮かびます）。 この問題については非常に優れたレポートがありますが、これを覚えておいてください。アプリケーションの大部分は、10kテーブルの行を交換する非常に大きなテーブルのようには見えません。 したがって、これらの結果も純粋な速度実験です。 現実の世界では、そもそもそのようなことはしません。

React vs. Angularvs.Vue.jsのイラスト

それでは、Reactに関するいくつかの質問と、それが競合他社とどのように比較されるかを見てみましょう。

たくさんの仕事の機会が欲しいです。 Reactはどれくらい人気がありますか？

答えるのは簡単です。Reactを選択してください。 実際、Reactの求人はVueの約6〜10倍（かなり大きな広がりですが、1：50のポータルと1：6のポータルがあります）で、Vueの2〜4倍です。 Angularより。 Reactの専門家に対する需要は強いのですが、なぜVueはGitHubで非常に人気があり（実際にはReactよりも星が多い）、求人が少ないのでしょうか。 何も思いつきません。

大きなコミュニティ、たくさんのライブラリ、発生する可能性のある問題の迅速な解決策が必要です。

反応する。 これ以上探さない。

使いやすく、開発が楽しくなりますか？

繰り返しになりますが、2018年と2017年のJS州のレポートによると、ReactとVueはどちらも非常に高い評価を得ており、ほとんどの開発者はそれらを再び使用すると述べています。 一方、Angularは、年々、二度と使用しないと言う人を増やす傾向があります。

新しいシングルページアプリケーションを作成したいのですが、ライブラリを検索したくありません。

おそらく、Angularがより良い選択だと私が言う唯一の場所です。

大企業はありません。 できるだけ自立したいのですが、どちらを選べばいいですか？

Vue —それは私たちの大きなトリオの中で唯一の独立したものです。 （FacebookはReactを支援していますが、GoogleはAngularを支援しています。）

最も簡単な開始と最速の学習曲線？

Vue/React。 私はここでVueに傾倒していますが、それは私の個人的な意見です。

なんで？ JSX（オプション）を知る必要はなく、基本的にはHTML + CSS+JavaScriptであるためです。

Reactチュートリアル：最初のアプリの使用を開始する

Reactチュートリアル：Reactアプリを作成するための成功メッセージのスクリーンショット

最近のReactを始める最も簡単な方法は、プロジェクトを作成し、Webpack/Babelなどに必要なすべての設定を回避するのに役立つCLIツールであるCRAを使用することです。 代わりに、デフォルトでどのように構成されているか、および時間の経過とともに何が含まれているかに依存します。 そのおかげで、いくつかの重要なライブラリのメジャーアップデートについて気にする必要はありません。

もちろん、後でnpm run ejectことで、自分で「イジェクト」し、すべての側面を自分で処理できます。 このアプローチには、他の方法では利用できないもの（デコレータなど）でアプリを拡張できるという独自の長所がありますが、多くの余分なファイルと多くの時間が必要になるため、頭痛の種になる可能性もあります。

したがって、最初に行うことは次のとおりです。

 npx create-react-app {app-name}

次に、 npm run startを実行すると、準備が整います。

クラスと関数のコンポーネント

まず、これらのコンポーネントの違いを説明する必要があります。 基本的に、各コンポーネントは関数またはクラスにすることができます。 それらの主な違いは、クラス1には、関数コンポーネントでは使用できない機能がいくつかあることです。状態を持ち、参照、ライフサイクルなどを使用できます。これが現在のプレイ状態であり、バージョン16.7以降（またはすでに述べた変更のために呼び出されます）、フックもあるので、状態と参照はフックで可能になります。

クラスコンポーネントには、 ComponentとPureComponentの2種類があります。 2つの違いは、 PureComponentが小道具と状態の浅い比較を行っていることです。コンポーネントとその子がまったく同じ状態にある「無駄な」レンダリングを作成したくない状況では、独自の利点があります。レンダリング後。 それでも、それは浅い比較にすぎません。 独自の比較を実装する場合（たとえば、複雑な小道具を渡すため）、 Componentを使用し、 shouldComponentUpdateをオーバーライドします（デフォルトではtrueを返します）。 16.6以降では、関数コンポーネントでも同様の機能を利用できますReact.memoは高次コンポーネントであり、デフォルトではPureComponent （浅い比較）のように動作しますが、独自のカスタムプロップ比較を渡すことができる2番目の引数が必要です。 。

一般的な経験則として、関数コンポーネントを使用できる場合（クラス機能は必要ありません）、それを使用します。 間もなく、16.7.0以降、クラスコンポーネントの使用は、ライフサイクルメソッドのためにのみ必要になります。 私は、関数コンポーネントがより透明で、推論しやすく、理解しやすいと信じがちです。

Reactライフサイクルメソッド

コンポーネントの取り付け、更新、および取り外しの図

コンストラクター（小道具）

  • オプションで、特にCRAが人気があり、JavaScriptのクラスフィールド宣言がデフォルトで含まれています。 クラス本体内の矢印関数でメソッドをバインドしているかどうかを宣言するのは無意味です。 同様の状態は、クラスプロパティとして初期化することもできます。
  • ES6クラスのオブジェクトおよびバインディングメソッドのローカル状態を初期化するためにのみ使用する必要があります。

componentDidMount（）

  • ここでAjax呼び出しを行います。
  • イベントリスナーやサブスクリプションなどが必要な場合は、ここに追加してください。
  • ここでsetStateを使用できます（ただし、コンポーネントが再レンダリングされます）。

componentWillUnmount（）

  • まだ進行中のすべてのものをクリーンアップします。たとえば、Ajaxを中断する、サブスクリプションをサブスクライブ解除する、タイマーをクリアするなどです。
  • コンポーネントがマウント解除されるため（警告が表示されるため）、 setStateを呼び出さないでください。

componentDidUpdate（prevProps、prevState、snapshot）

  • コンポーネントの更新が完了したときに発生します（最初のレンダリングでは発生しません）。
  • オプションで使用できる3つのパラメーターがあります（以前の小道具、以前の状態、およびコンポーネントがgetSnapshotBeforeUpdateを実装している場合にのみ表示されるスナップショット）。
  • shouldComponentUpdateがtrueを返した場合にのみ発生します。
  • ここでsetStateを使用する場合は、それを保護する必要があります。そうしないと、無限ループに陥ります。

shouldComponentUpdate（nextProps、nextState）

  • パフォーマンスの最適化のみ。
  • falseが返された場合、レンダリングは呼び出されません。
  • オーバーライドされたSCOが単に浅い小道具/状態の比較である場合は、代わりにPureComponentを使用できます。

getSnapshotBeforeUpdate（）

  • 現在のDOMに関する情報を保持するために使用できます。たとえば、現在のスクロール位置は、後でcomponentDidUpdate内で再利用して、スクロールの位置を復元できます。

componentDidCatch（エラー、情報）

  • ロギングエラーが発生する場所。
  • setStateを呼び出すことができますが、将来のリリースでは、静的メソッドgetDerivedStateFromError(error)を優先して削除されます。このメソッドは、状態を更新するための値を返すことによって状態を更新します。

両方とも静的であり、他の説明で言及された2つの追加の方法があります

static getDerivedStateFromError（error）

  • エラー情報はこちらから入手できます。
  • エラーの処理に使用できる状態を更新するオブジェクト値を返す必要があります（何かを表示することによって）。
  • 静的であるため、コンポーネントインスタンス自体にはアクセスできません。

static getSnapshotBeforeUpdate（props、state）

  • 小道具が時間の経過とともに変化する場合に使用する必要があります。たとえば、Reactのドキュメントによると、トランジションコンポーネントに役立つ場合があります。
  • 静的であるため、コンポーネントインスタンス自体にはアクセスできません。

現在利用できるメソッドは他にもいくつかありますが、React 17.0で削除される予定であるため、ここでは言及しませんでした。

州対小道具

プロップは説明が簡単で速いので、プロップから始めましょう。 小道具は、コンポーネントに渡されるプロパティであり、後で情報/ビジネスロジックなどを表示するためにコンポーネント内で再利用できます。

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

上記の例では、 nameは小道具です。 小道具は読み取り専用の要素であり、子コンポーネントで直接変更することはできません。 また、人々がよく行う悪い習慣が1つあります。それは、小道具を州にコピーし、その後州で活動することです。 もちろん、「送信後に親コンポーネントを更新する初期状態」のようなことをしたい場合もありますが、それはもっとまれです。そのようなシナリオでは、初期状態のフィードが理にかなっている場合があります。 また、文字列などのプロパティを子コンポーネントに渡すことができるだけでなく、数値、オブジェクト、関数なども渡すことができます。

プロップには、 defaultPropsと呼ばれるもう1つの便利な機能もあります。これは、コンポーネントのデフォルトのプロップが何であるかを示す静的フィールドです（たとえば、コンポーネントに渡されない場合）。

1つのコンポーネント（親）の状態が後で子によって再利用される（たとえば、1つの子がそれを表示し、別の子が編集を許可する）「リフティング状態」の場合、関数を子に渡す必要があります。親。これにより、親のローカル状態を更新できます。

一方、 Stateは、変更可能なローカル状態ですが、 this.setStateを使用して間接的に変更できます。 誰かが状態を直接変更する場合、コンポーネントは変更を認識せず、前述の変更を状態に反映するために再レンダリングされません。

SetStateは、（浅いマージを実行することによって）ローカル状態オブジェクトを変更するメソッドであり、その後、コンポーネントはそれ自体を再レンダリングすることによってそれに応答します。 setStateが使用された後、 setStateプロパティは、最適化のためにsetStateのいくつかのインスタンスが一緒にバッチ処理される可能性があるため、関数で言及された変更をthis.stateには反映しないことに注意してください（非同期の性質があります）。 これらの可能性の1つにより、状態を更新した直後にコンポーネントで何かを実行できる場合に呼び出す方法がいくつかあります。

  • setState({value: '5'})
  • setState((state, props) => ({value: state.name + “'s”}))
  • setState([object / function like above], () => {}) –このフォームを使用すると、 callbackをアタッチできます。コールバックは、状態が（最初の引数で）必要なデータを反映するときに呼び出されます。
 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Reactコンテキスト

Reactは最近安定化されたContextAPI（かなり長い間Reactにありましたが、Reduxのような最も人気のあるライブラリのいくつかで広く使用されているにもかかわらず実験的な機能でした）。これは1つの問題を解決するのに役立ちます：小道具のドリル。 要するに、小道具の掘削は、構造内の奥深くに小道具を渡す方法です。たとえば、コンポーネントのある種のテーマ、特定の言語のローカリゼーション、ユーザー情報などになります。 コンテキストの前（または非実験的になる前）は、親から子へと最後のリーフまで再帰的に渡すことによってドリルダウンされました（明らかに、問題を解決できるReduxがありました）。 この機能は小道具の穴あけのみを解決し、ReduxやMobxなどの代わりにはならないことに注意してください。 もちろん、そのためだけに状態管理ライブラリを使用していた場合は、自由に置き換えることができます。

まとめ

これで、Reactチュートリアルの最初の部分は終わりです。 今後の記事では、スタイリングやチェックタイプから、本番環境への展開やパフォーマンスの最適化に至るまで、より高度なトピックに取り組むことを望んでいます。

関連：コントロールの維持：WebpackとReactのガイド、Pt。 1