ホームページ  >  記事  >  ウェブフロントエンド  >  {useState} HooK { 簡単に説明します};

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

PHPz
PHPzオリジナル
2024-09-10 11:30:14282ブラウズ

{useState} HooK { Briefly Explained};

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 は最初のレンダリング中にのみ使用され、後続のレンダリングでは無視されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。