ホームページ > 記事 > ウェブフロントエンド > {useState} 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 は最初のレンダリング中にのみ使用され、後続のレンダリングでは無視されます。
以上が{useState} HooK { 簡単に説明します};の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。