ReactでuseStateフックを使用するための基本と、それがプログラミングスキルを向上させるためのはしごになる方法

若い開発者として、私たちのほとんどはおそらくクラスベースのコンポーネントのライフスタイルメソッドでReactを使用することを学びました。これは、Reactの使用方法とそのコンポーネントの構造をしっかりと把握するための最も簡単な方法です。ただし、Reactのパワーを活用するためのより良い方法があり、その名前はフックです。複雑で、おそらくいくつかのことを学ばなくてはならないにもかかわらず、フックを使用することはゲームチェンジャーであり、コーダーのプログラミングスキルをレベルアップします。

フック

この特定のブログでは、useStateフックに焦点を当てますが、状態管理およびライフサイクルメソッドの代替アプローチとして使用できるフックは合計10個あります。フックは開発者にとって非常に有益である可能性があり、コンポーネントの記述方法をより良いものに変えます。

それらは、多かれ少なかれゲームの名前である、より明確でより簡潔なコードを書くのに役立ちます。コードが実行していることを他の開発者にもっと簡単かつ簡単に伝えることができることは非常に貴重です。

読みやすさの向上に加えて、フックを使用することでテスト性も向上します。

useState

クラスベースのコンポーネントとフックを使用することの違いを、単純なカウンター関数で示すことができます。基本的には、マウスをクリックするだけでカウントを上げるボタンです。最初の例では、状態を確立するためにコンストラクター関数が必要です。次に、incrementCount関数は、ボタンがクリックされると、setStateを使用して状態のカウントを更新します。

これを呼び出さなければならない複数のインスタンスに注意してください。関数または状態への参照の前のキーワード。これにより、コードが不格好に見える可能性があり、確かにいくつかの余分な行が追加されます。

次に、同じコードの例を見てみましょう。代わりにuseStateフックを使用します…

まず、上部のreactからuseStateコンポーネントをインポートします。クラス構文やコンストラクターを使用する必要はありません。定数を割り当ててデフォルトのカウントを設定し、setCountを割り当てて変更するだけです。incrementCountのコンポーネントは、より読みやすいと参照がsetCount直接。

目にはそれほど良くありません！

コードでフックを使用すると、プログラマーとして次のレベルに進むためのはしごとして確実に機能します。必要なのは、Reactでこの代替スタイルのコーディングを理解するための少しの再学習と練習です。フックの世界へのこの小さな紹介を楽しんでいただけたと思います。私のコンテンツが気に入ったら、他のブログもチェックしてください。ハッピーコーディング！