新人開発者の年代記:私の

それは最終的にここにある.新人開発者の年代記の待望の第2版.(はい、私は自分の自作のブログシリーズを恥ずかしく思ってしまいました.😏)
今日の作品は、そこで最も人気のあるフロントエンドライブラリ以外には、reactjsです.私の1ライナー意見?ちょうどその人気がどこから来るかについて理解することができると言いましょう.しかし、私の愛情はブログ記事の多くを作りません、それで、ちょうど右へ飛び込みましょう!
JSポストと同様に、私は単に私の最初の印象、私が道に沿って学んだいくつかのものを共有することから始めると思いました、そして、多分、いくつかの考えが前進することで終わりにあなたを残しているかもしれません.

一つフックのフック。

私はちょうどすぐに来て、それを言うつもりです.フックがフックなしで何をしますか?それは大丈夫だった.しかし、真剣に、すべてのフックでとても簡単です.私は最初にフックの例に最初に遭遇したとき、私はとても騙されました.すべてのこれらのものはフックと完全に「離れて行く」というわけではありません、そして、1つのすべてのベースをカバーすることを後悔しません.それで、私がちょうどこの道に出発している誰のためにでも、私はまだあなたが古いものと新しいものを理解するために時間がかかることを勧めます.また、いくつかのデザインパターンや何か微妙なものに従うかどうかにかかわらず、伝統的な方法を使用することがより賢明である状況に非常にうまく走れます.(そして、良い例を挙げるなら、下記のコメントをお勧めします)しかし、私が作りたい点は、フックがそうであることです.まあ彼らはすばらしい.

二つ。不明な場合は、USENT。

私は新しい機能を追加したり、既存のものに改善したいときに気づいた1つのことは、私は常に設定している状態を使用していることです.私のアプリケーションのreduxでさえ、私はすぐに、地方の州の必要がREDUXが解決するように設計されているものとほとんど完全に異なると理解しました.Reduxは、真の単一のソースを維持し、プロップドリルを防ぐのに役立ちますが、それは密接に密接に他の非重要なまたはUIの状態とは対照的にあなたのアプリケーションを介して必要な実際のデータに関連付けられている.たとえば、私のアプリケーションがどのように振舞うか、またはどのようにコンポーネントをレンダリングするかについて扱っている場合、通常は、アプリケーションの特定の状態を表す値を追跡する必要があるということです.
この例を見てください.私は私のアプリケーションにクイズのような機能を構築していたし、視覚的にどのように迷惑なクイズや調査をするかどうかをあなたが完了する前に“次へ”を押すことを期待することができますどのように多くの時間を考えていなかったので、質問をしたユーザーを表示するステッパーを組み込む必要があった.それで、私はクイズで各々の質問のために別々の構成要素を貸す「親」コンポーネントを持っています.(fyi、私はまた、これらのレンダリングのそれぞれのための新しいルートにユーザーを取るために反応ルータを使用しています.)

import { Routes, Route } from 'react-router-dom';
import QuestionOne from './quiz/QuestionOne';
import QuestionTwo from './quiz/QuestionTwo';
...

function Quiz() {
   return (
      <div>
         <Routes>
            <Route path="1" element={<QuestionOne />} />
            <Route path="2" element={<QuestionTwo />} />
            ...
         </Routes>
      </div>
   );
}

ここでは、どのような情報が変化しているかを考えるために停止します.したがって、状態(現在のクイズの質問)に属していて、どのコンポーネントがマウントされているか、どのコンポーネントが入ってきているのかを確認するために停止します.それで、私のステッパーがどこに住んでいるか、そして、どのコンポーネントがユーザーがオンになっているかを追跡するべきですか?答えは明らかに親コンポーネントです.Quiz . 偉大なので、我々はそれを追加します.

...

function Quiz() {
   return (
      <div>
         <Routes>
            <Route path="1" element={<QuestionOne />} />
            <Route path="2" element={<QuestionTwo />} />
            ...
         </Routes>
         <Stepper steps={10}
            nextButton={<button onClick={handleNext}> Next </button>}
            backButton={<button onClick={handleBack}> Back </button>} />
      </div>
   );
}

(実際のステッパーコンポーネントでは、UIを使用していますが、この例のためにそのプロパティを簡略化しました.
渡されている小道具はかなり自己説明ですがsteps 明らかに、我々が我々のステッパーが持っているステップの総数を指しますnextButton and backButton 私たちの2つのボタンを表すそれぞれがonClick 私たちのクイズを前後に移動を処理するイベント.だから今、どのようにステッパーを実際に我々は現在のステップを表示することができますか?エンターuseState フック.

//Quiz.js
...
import { useState } from 'react';

function Quiz() {
   const [activeStep, setActiveStep] = useState(0);
   return (
      <div>
         <Routes>
            <Route path="1" element={<QuestionOne setActiveStep={setActiveStep} />} />
            <Route path="2" element={<QuestionTwo setActiveStep={setActiveStep} />} />
            ...
         </Routes>
         <Stepper steps={10}
            activeStep={activeStep}
            nextButton={<button onClick={handleNext}> Next </button>}
            backButton={<button onClick={handleBack} disabled={activeStep === 0}> Back </button>} />
      </div>
   );
}

//QuestionOne.js
import { useEffect } from 'react';

function QuestionOne({setActiveStep}) {
   useEffect(() => {
      setActiveStep(0);
   }, []);

   return ...
}

export default QuestionOne;

//QuestionTwo.js
...

function QuestionTwo({setActiveStep}) {
   useEffect(() => {
      setActiveStep(1);
   }, []);

   return ...
}

export default QuestionTwo;

何かのカップルがここで起こっているが、最初に私はいくつかのローカル州を設定しますQuiz 初期値のコンポーネント0 そして名前activeStep . 私は、それから私への支柱としてこれを渡しますStepper コンポーネントは、我々が何をしているかを伝えるために(そして、我々が最初のステップ/質問であるとき、「戻る」ボタンを無効にするためにそれを使う)ことを命じます.それから私はsetActiveStep 子供たちが彼らの中でそれを使うことができるように、子供たちに方法useEffect 私は基本的に模倣するために設定したcomponentDidMount ライフサイクル.
だから今、ユーザーが質問コンポーネントをレンダリングするたびに、親はactiveStep ステッパに対応する値を状態と共有します.
私が地元の州を利用した場所のいくつかの他の大きな例は、私のログイン/サインアップ引き出し、制御された形、いろいろなスナックバー、ダイアログ、トグルとより多くです.反応することで建築するとき、あなたが変更する必要がある文字通りどんな値でもそれを使用するために場所を使用して、管理するために場所の短いことは決してありません、それがローカルか大域状態に格納される必要があることを意味します.
しかし、それはあなたの情報を格納するために使用する必要があります2つのいずれかになると正しい答えがないことを心に留めておくことが重要です.Reduxのドキュメントでも、多くの場合、開発者が作る必要がありますし、良いバランスを見つけることが重要であることを教えてくれます.いくつかの開発者は、世界的な状態管理ツール(REDUXのような)で絶対にすべてを格納することで、より快適です.私は個人的に、それが我々がローカル州を利用することができるとき、世界的な州で情報のあらゆるビットを含むアンチパターンを見つけます.
だから次回は、機能を開発したいが、開始する場所に無関心または無関心を感じている状態でいくつかの値を設定しようとするとどのようにどのようにこれらの値を変更する必要がありますに焦点を設定しようとすると、ご希望の動作を実装する.

三つ。コンポーネントツリーのメンタルノートを保持します。

最後に、これで終わりたいです.プロジェクトを始める前に、コンポーネントツリーをどのように構築するかをしっかりと把握するのに十分な時間をかけて、アプリケーションのコントロールフローを大きくすることができます.一度ユーザーが自由にアプリの周りに移動を開始すると、それはすぐにどのコンポーネントが常にマウントされ、アンマウントを意識する必要があることが明らかになります.これは特に、コンポーネントのライフサイクルが特定の状態値がどこに存在するべきかを決定する上で重要であり、コードとしてあなたがそれを暗記していないならば、それは道路(特にあなたのアプリケーションがサイズと機能の両方でより大きくなるように)の下でいくつかの非常に予想外の振舞いにつながることができます.
いつものように、読むために時間を割いていただき、ありがとうございます、もう一度、ルーキー開発者の年代記の次のエディションのために調整滞在!