23 ReactJSショートパンツ-初心者だけでなく短いビデオチュートリアル

昨年、私は1時間半の長いレッスンを費やしました。そこでは、Reactを実際に研究し、大小のアプリケーションを作成し、常にゼロからライブで行いました。 私はこれらのペアプログラミングのセッションを常に放送しており、それは私のパートナーと、私たちと一緒にコードを書いてライブで質問した人々に主な利益をもたらしました。 しかし、技術の研究における実践は最も重要です。



しかし、そのようなレッスンを1時間半画面で見るのは耐え難いほど困難であり、常に同じことを繰り返し、著者の長い「退屈な」発言から知識のレーズンを見つけました。とても難しいです。 それにもかかわらず、ペアプログラミングの毎週のセッションに依存している開発者の大部分は、自分自身で新しいReactを学び、大規模なプロジェクトの複雑なタスクを正常に実行しました。 しかし、それらを見るのは退屈です。 どうする



ショートパンツがありました。 私は過去のレッスンからすべてのレーズンを集め、実際によくある質問と、インタビューの初心者のための穴を集めて、3-4分のクリップに変えました。 ショートの原則：サンプルコード、5分以内、事前にダイヤルされたコード、些細なコンテンツなし、実践による問題の確認。



私は誰ですか？ Wetzel Eugene、 w3bsit3-dns.comの作成者、 SFのジャンルの本の著者、大規模なフロントエンド企業CSSSRのチームのテクライド 。

CSSSR Shorts＃1：CodePenでのReact Jsの展開

ES6言語仕様を使用してReactのコードを記述できるオンラインコードエディターの最小設定に関するストーリー

短いコード： codepen.io/Imater/pen/XpLbrg

CSSSR Shorts＃2：CodePenでReact Js + Reduxをデプロイする

ES6言語仕様を使用してReact + Reduxのコードを記述できるオンラインコードエディターの最小設定に関するストーリー。 さらに、reduxを使用した最小限のコードの例。

短いコード： codepen.io/Imater/pen/JEQdGv

CSSSR Shorts No. 3：shouldComponentUpdate-コンポーネントの更新管理

Reactが初心者向けの高速マスクであるという事実は、何もしなければ、ユーザーのアクションによってアプリケーション全体が再描画されるという事実です。 このチュートリアルでは、レンダリング関数の不必要な呼び出しを防止する、Reactパフォーマンスの基本について説明します。

短いコード： codepen.io/Imater/pen/pRXJPe

CSSSR Shorts＃4：パフォーマンスを損なう小道具

render関数の不必要な呼び出しにつながる最も一般的なエラーは、propsコンポーネントを渡すことです。このコンポーネントへのリンクは毎回再作成されます。 通常は無害に見えるため、大規模なアプリケーションではこれを防ぐために目を訓練する必要があります。 PureComponentの目的も考慮されます。これは、すべての小道具を過去の値と比較し、何も変更がなければレンダーの呼び出しを回避します。

短いコード： codepen.io/Imater/pen/pRXJaw

CSSSR Shorts＃5：コンポーネントの状態の変更はPureComponentのレンダリングに影響しますか

実際には、this.setState（）を呼び出すときにpureComponentコンポーネント関数が呼び出されるかどうかを調べます。

短いコード： codepen.io/Imater/pen/ZLdbwN

CSSSR Shorts＃6：this.setStateの3つが連続して呼び出されたときにrenderが呼び出される回数

Reactを高速化するために複数のsetStateを組み合わせる必要がありますか

短いコード： codepen.io/Imater/pen/JEQYgX

CSSSR Shorts＃7：コードに干渉することなくconsole.logでデバッグする

式を使用して、console.logが「undefined」を返すという事実を利用して、console.log（var）|| var`変数を表示して、コードへの干渉を最小限に抑えることができます。 矢印関数またはオブジェクトで非常に便利です。

短いコード： codepen.io/Imater/pen/jyjWOd

CSSSR Shorts No. 8：Reduxを15行で記述し、Reactなしで使用します

内部でreduxがどのように機能するかを理解し、コードの内部を見なかった人を必然的に取り巻くすべての魔法を払拭するには、このレッスンまたはコードをご覧ください。

レッスンコード： codepen.io/Imater/pen/pRMexM

CSSSR Shorts＃9：Reactコンポーネントで関数を作成し、このコンテキストを渡すためのオプション

クラス（Reactコンポーネント）に関数を記述するための6つのオプションを検討し、この関数が関数内で異なるコンテキストを持っている理由を理解してください。 コードを見ると、インタビューでよく見られるさまざまなオプションを永遠に思い出し、実際のプロジェクトで混乱を引き起こします。

短いコード： stackblitz.com/edit/react-m32gzi

CSSSR Shorts No. 10：Memoizeeキャッシング、およびReactアプリケーションの最適化が必要な理由

キャッシング機能の実装と、Reactコンポーネントの不要なリアクターを排除するためのその使用。

短いコード： stackblitz.com/edit/react-7opmc8?file=index.js

CSSSR Shorts No. 11：実行前に関数にデータを渡すためのMemoizeeキャッシュ

memoizeeを使用する別の方法を検討してください。実行前に引数を渡すために関数を返す関数をキャッシュします。

短いコード： stackblitz.com/edit/memoizee-on-click?file=index.js

CSSSR Shorts No. 12：定数からコンポーネント名を使用し、さまざまな条件下でのレイアウトを容易にします

変数で使用されるコンポーネントの名前を格納する珍しい方法。 さまざまな条件下でのレイアウト変更に役立ちます。

短いコード： stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts＃13：実際にコードを変更せずに変数をコンソールに出力する

Chromeの条件付きブレークポイントは、コンソールに出力コードを追加したり、停止条件をデバッグするのに便利です。

短いコード： stackblitz.com/edit/component-name?file=index.js

CSSSR Shorts＃14：再選択-よりスマートなキャッシング機能

再選択は、Reactコンポーネントの不必要な再レンダリングを排除し、自動キャッシュで複雑なセレクターを作成するのに役立ちます。 主な利便性は、キャッシュキーを返すすべての関数が同じ引数のセットを受け取ることです。 reduxの場合、ストレージ全体を入力に送信する方が適切です。グローバルセレクターは「全能」であり、アプリケーションの状態全体から出力を収集できます。 したがって、ストレージ全体を引数として使用する場合、相互に結合するセレクターでアプリケーション全体を作成できます。

短いコード： stackblitz.com/edit/reselect?file=index.js

CSSSR Shorts＃15：Redux Connect機能でのキャッシュの再選択

Reduxの接続機能でキャッシュを再選択すると、不要なコンポーネントレンダラーがなくなります。 1つのレデューサー上の1つのリポジトリでreduxを使用します。 データは変更されていないが、それらへのリンクは変更されている場合の追加のレンダラーを示します。 4つのRamdaJs関数を使用します：path、sortBy、prop、compose。

再選択なしの短いコード： stackblitz.com/edit/redux-simple-bad?file=index.js

再選択を伴うコードのショートレクト： stackblitz.com/edit/redux-simple-with-reselect?file=index.js

CSSSR Shorts No. 16：Redux形式の最小使用例

Redux-formは最小限の使用例です。 他のストレージからの初期値の初期化。 最小限のredux形式の接続コードの仕組みに関するストーリー。 複数の減速機の組み合わせ。 R.composeを使用して、リポジトリとreduxFormに接続されたコンポーネントを作成する際の括弧の数を最小限に抑えます。

短いコード： stackblitz.com/edit/redux-form-v1?file=index.js

CSSSR Shorts＃17：ノーマライズによるフィールドreduxFormのマスク

入力中に8922884848を2017年12月1日に8-922-88-48-48または12012017に変換する必要がある場合はどうすればよいですか？ 回答：normalizeを使用すると、現在の入力フィールドだけでなく、すべてのフォームフィールドのすべての値の新しい過去の値が取得されます。 この情報を使用して、現在のフィールドの新しい値を計算します。

ショートコード： stackblitz.com/edit/redux-form-v2-normalize?file=index.js

CSSSR Shorts＃18：reduxFormのネイティブ入力コンポーネント

クラスとして作成する単純な入力コンポーネントを見てみましょう。 このコンポーネントが受け取るプロパティについて説明します。

短いコード： stackblitz.com/edit/redux-form-v3-component?file=index.js

CSSSR Shorts No. 19：フォーム内のボタンのタイプを忘れるとどうなりますか

ボタンでtype = "button"を忘れた場合、フォームを送信すると、このボタンはonClickを呼び出します。

短いコード： codesandbox.io/s/y2ql953m9j

CSSSR Shorts＃20：reduxFormのネストされたデータ構造

FormSectionを使用して、任意の深さのネストされたデータ構造を指定する

短いコード： codesandbox.io/s/8x02q1jro8

CSSSR Shorts No. 21：フォームからフィールド値を変更する方法

フォームの変更機能を使用して、ネストを使用してフィールド値を設定する

短いコード： codesandbox.io/s/8x02q1jro8

CSSSR Shorts No. 22：単一の関数で複数のフィールドを変更する

変更機能を使用してredux-formで複数のフィールドを一度に変更する

短いコード： codesandbox.io/s/7wxkvww01j

CSSSR Shorts＃23：reduxFormにinitialValuesのストレージをリッスンさせる

enableReinitializeプロパティreduxFormは、ストアでデータが変更されたときにフォームにinitialValuesを強制的に更新させます

短いコード： codesandbox.io/s/7wxkvww01j



ご清聴ありがとうございました。 最初の4つのクリップでマイクをscるな



React shorts、そしてAngular 2+が毎週今週中に公開されます。 youtubeチャンネルを購読します。 そこでの夏のカンファレンスのビデオを見てください。 私たちのために働きに来てください。