反応USENTフック

我々が記事の核心に入る前に、反応フックのあたりの若干の重要な詳細について行きましょう.

フックは何ですか。

フックは反応版16.8で導入されました.フックは、ユーザーが関数コンポーネントの状態とLifeCycleメソッドにアクセスできるようにする関数です.フックが反応して導入される前にclass コンポーネントは、状態とライフサイクルメソッドにアクセスする唯一のオプションです.たとえclass コンポーネントはもはや必要ありません、彼らはまだ若干の遺産コードで見つかります.

There are no plans to remove classes from React — we all need to keep shipping products and can’t afford rewrites. We recommend trying Hooks in new code. React doc

フックの使用規則

フックは機能部品でのみ使用できます.

フックは、内部のように条件でありえませんif...else , switch 文.

フックはコンポーネントのトップレベルでのみ呼び出さなければなりません.

反応USENTフック

useState フックは、コンポーネントのレンダリングの間のコンポーネントの情報を追跡することができますこのような情報は、コンポーネントの状態と呼ばれます.状態は、関数内で宣言された変数の値のようです.

USENTの使い方

インポートUSENTフック

ASuseState フックは我々が簡単に反応から破壊することによってそれをインポートすることができます反応ライブラリ内の名前のエクスポートです.

import {useState} from "react"

初期化方法useState フック

useState フックは、コンポーネントの先頭に、コンポーネントコンポーネントを呼び出して初期化されます.
ここで再び戻り値を破壊します.

const Counter = () => {

const [count , setCount ] = useState(0)

}

二つの値を返します.

“Count”は現在の状態です.

“setCount”は、状態を更新するために使用される関数です.

Common naming convention for the useState hook is:

[ variable , setVariable ] = useState()

Here "variable" can be anything.

最後に、フックに初期状態を与えますobject , string , number , array , boolean , またはこれらの任意の組み合わせ.我々の場合ではnumber .

Initial state = useState(0)

州の読み方

最初の戻り値は状態の値になります.我々は、コンポーネントをどこでも状態を読むためにそれを使用することができます.

const Counter = () => {

const [count , setCount ] = useState(0)

return (

<h1> Current value is  {count} </h1>

)}

州更新方法

この関数は、useState この場合フックsetCount .

Note: Never update the state directly. Example: count= 25 .

function increaseCount(){

setCount( prevValue => prevValue+1 )

}

上記のすべてのコードスニペットを組み合わせて、次のCodesandBoxを取得します.チェックするApp.js 次のコードファイルのファイル.

状態のオブジェクトを更新する

上記のセクションで、我々は州で番号を更新する方法を議論しましたuseState は使えますobject , string , number , array , boolean , または状態として、これらの任意の組み合わせ.だから今、次の点で、我々はどのように状態のオブジェクトを更新する方法を学びますか?
コンポーネントの状態が更新されると、コンポーネントの全状態が完全に上書きされます.ただし、状態でオブジェクトを使用している間、オブジェクトの特定のプロパティを更新し、残りのプロパティを変更しないでください.
状態更新が完全に状態から以前の値を使用せずに前の状態に代わる方法を見ましょう.
ここでは機能withoutPrevious 我々は更新lastName へのプロパティー.

 function User() {

  // Update without prev values

  const [user, setUser] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

//  Function to update without prev value
  const withoutPrevious = () => {
    setUser((prev) => {
      return { lastName: "Bhardwaj" };
    });
  };

return (
    <div className="App">
      <h3>
        I am {user.firstName} {user.lastName} from {user.city}.
      </h3>

      <button onClick={withoutPrevious}>
        Update last name without previous values.
      </button>

}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Bhardwaj from.

オブジェクトの特定のプロパティだけを更新し、他のすべてのプロパティの実際の値を保持する方法を見てみましょう.
上記の関数とは異なりlastName 機能上withPrevious スプレッド演算子を使用して、以前の値を新しい状態に広げ、lastName プロパティ.

function User() {

  //  Update with prev values
  const [user1, setUser1] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

   // Function to update with prev values
  const withPrevious = () => {
    setUser1((prev) => {
      return { ...prev, lastName: "Bhardwaj" };
    });
  };

  return (
    <div className="App">

        I am {user1.firstName} {user1.lastName} from {user1.city}.
      </h3>

      <button onClick={withPrevious}>
        Update last name with previous values.
      </button>
    </div>
  );
}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Vansh Bhardwaj from Delhi.

上記のコードのCodesandBoxをチェックしてください.チェックアウトApp.js 次のコード表示ボックスのファイル.
それはこのブログのためのすべてです.この反応フックシリーズは、反応フックについての詳細をご覧ください.次のブログでは、「use effect」フックを見てみましょう.
以下のコメントであなたの貴重なフィードバックを残してお気軽に.
反応、JavaScript、およびWeb開発の詳細については、私に従ってください.
参考:w 3スクール