React HooK= { 簡単に説明します};

useState は React フックで、state と setState の 2 つの変数を含む配列を返すことでコンポーネントに状態を追加できます。現在の状態と、呼び出されたときにセッター関数となる関数。これは、文字列、数値、ブール値、配列、オブジェクトなど、アプリケーションで追跡する必要があるデータまたはプロパティを追跡するために使用できます。
例:

const [state, setState] = useState();

簡単に言うと、状態は任意の時点で変更され、更新する必要があるため、「setState」は状態を更新し、時間の経過とともにコンポーネントの再レンダリングをトリガーします。

さらに、useState はオブジェクトを含むあらゆる種類の JavaScript 値を保持できます。常に心に留めておくべきことは、React 状態にあるオブジェクトを直接変更しないでください。まず、新しいものを作成するか、既存のコピーを作成してから、新しいコピーに State を設定する必要があります。例:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

React コンポーネントで useState を使用するには、まずコンポーネントのページの上部に次のコードを 2 つの異なる方法で記述して、React からインポートする必要があります。どちらも機能します。完璧なので、毒を選択できます。

import React from 'react';
import {useState} from 'react';

または 1 行で書くこともできます

import React, {useState} from 'react';

React フック useState は、コンポーネントのトップレベルまたはカスタム フック内で呼び出すことができますが、ループや条件内では呼び出すことができません。

const [initialState, setInitialState] = useState();

initialState は最初のレンダリング中にのみ使用され、後続のレンダリングでは無視されます。
InitialState 関数は setInitialState 関数に渡され、前の状態を引数として受け取り、newState を返します。

さらに、私の意見では、React でフックを使用できる場所と使用できない場所について特別なルールはありません。もちろん、コードを整理しておくためには、慎重かつ戦術的に行う必要があります。

私のプロジェクトの 1 つである SPA (シングル ページ アプリ) の構築では、目標を達成するためにさまざまなコンポーネントがありました。うまく整理する秘訣は、コンポーネントを追跡することです。たとえば、App.js コンポーネントは、更新が必要なデータの種類に応じて {useState} を使用します。
React から {useEffect} という別の強力なフックを導入し、それを {useState} とともに使用して、これらのフックがデータに対してどのように操作を実行するかを説明しましょう。次の例は、最近のプロジェクトで使用した App.js コンポーネントからのものです。私は、1 年間の子供の発達を助けるおもちゃの db.json ファイル データを扱っていました。これは私のエンドポイント http://localhost:4000/toys で、アプリケーション コンポーネント内で {useState} と {useEffect} がどのように動作するかのプロセスを理解するのに役立ちます。

最初: 状態の初期化:

const [toys, setToys] = useState([]);

• この行は、空の配列 [] を初期値として状態変数 Toys を初期化します。
• setToys は、おもちゃの状態を更新するために使用される関数です。

2 番目: コンポーネント マウント時のデータのフェッチ:

useEffect(() => {
    fetch("http://localhost:4000/toys")
      .then(response => response.json())
      .then(data => setToys(data));
  }, []);

• {useEffect} フックは、コンポーネントで副作用を実行するために使用されます。
• 依存関係配列 ([]) が空であるため、{useEffect} 内の関数はコンポーネントのマウント時に 1 回実行されます。

3 番目: おもちゃのデータを取得:

• fetch("http://localhost:4000/toys")
  • この行は、指定された URL に対して GET リクエストを実行して、おもちゃのデータを取得します。
• .then(response =>response.json())
  • 取得リクエストからの応答は JSON 形式に変換されます。
• .then(toysData => setToyData(toysData));
  • JSON データ (toysData) は、setToys 関数を使用しておもちゃの状態を更新するために使用されます。

{useState、useEffect} の両方がどのように機能するかをさらに詳しく理解するには、React の公式 Web サイトにアクセスしてください。さらに、もう 1 つの役立つ情報源は、私の個人的なお気に入りである w3schools の Web サイトです。独自のブラウザで試すことができる例とともに要点を直接説明します。最後に、より技術的なソースが必要な場合は、mdn Web ドキュメントが役に立ちます。

以上がReact HooK= { 簡単に説明します};の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。