ステートフック例: 'react' から useState をインポートします。 関数の例() { 定数[count, setCount] = useState(0); //count: 宣言された変数; setCount: カウント値を変更する関数; 0: カウントの初期値 return ( <div> <p>クリック回数は {count} 回です</p> <ボタンのクリック時={() => setCount(count + 1)}> クリックしてください </ボタン> </div> ); } useState は react に付属するフック関数であり、その機能は状態変数を宣言することです。 useState 関数が受け取るパラメータは初期状態です。配列を返します。この配列の [0] 番目の項目は現在の状態値で、[1] 番目の項目は状態値を変更できるメソッド関数です。 ユーザーがボタンをクリックすると、setCount 関数が呼び出され、新しい状態値がパラメーターとして受け取られます。次に、React に任せて、Example コンポーネントを再レンダリングします。 コンポーネントに複数の状態値がある場合はどうなりますか? 関数 ExampleWithManyStates() { 定数[年齢、年齢の設定] = useState(42); const [フルーツ、setFruit] = useState('バナナ'); const [todos, setTodos] = useState([{ text: 'フックを学ぶ' }]); } 第二に、useState が受け取る初期値は、文字列/数値/ブール値などの単純なデータ型である必要はありません。オブジェクトまたは配列をパラメーターとして受け取ることができます。注目すべき唯一の点は、以前の this.setState は状態をマージして新しい状態を返しましたが、 一方で、フックはクラスではなく関数内で直接使用されます。他方では、各フックは互いに独立しており、同じフックを呼び出す異なるコンポーネントは、それぞれの状態の独立性を確保できます。 react はどのようにして複数の useStates の独立性を確保するのでしょうか? 答えは、 //最初のレンダリング useState(42); //年齢を42に初期化 useState('banana'); // fruit を banana に初期化します useState([{ text: 'フックを学ぶ' }]); //... // 2 回目のレンダリング useState(42); // 状態変数 age の値を読み取る (このとき渡されたパラメータ 42 はそのまま無視されます) useState('banana'); //状態変数 fruit の値を読み取ります (この時点ではパラメータ banana は無視されます) useState([{ text: 'フックを学ぶ' }]); //... React では、フックの実行順序の一貫性を確保するために、関数の最外層にフックを記述する必要があり、ifelse などの条件文に記述することはできないと規定されています。 エフェクトフック 例: 'react' から useState、useEffect をインポートします。 関数の例() { 定数[count, setCount] = useState(0); // componentDidMount および componentDidUpdate と同様: 使用効果(() => { // ドキュメントのタイトルを更新します document.title = `${count} 回クリックしました`; }); 戻る ( <div> <p>クリック回数は {count} 回です</p> <ボタンのクリック時={() => setCount(count + 1)}> クリックしてください </ボタン> </div> ); } フックなしでどのように記述するのでしょうか? クラスExampleはReact.Componentを拡張します{ コンストラクタ(props) { スーパー(小道具); この状態 = { カウント: 0 }; } コンポーネントマウント() { document.title = `${this.state.count} 回クリックしました`; } コンポーネントを更新しました() { document.title = `${this.state.count} 回クリックしました`; } 与える() { 戻る ( <div> <p>{this.state.count} 回クリックしました</p> <ボタンのonClick={() => this.setState({ count: this.state.count + 1 })}> クリックしてください </ボタン> </div> ); } } 私たちが作成するステートフル コンポーネントには通常、データを取得するための Ajax リクエストの開始、リスナーの登録と登録解除の追加、DOM の手動変更など、多くの副作用があります。これまで、componentDidMount、componentDidUpdate、componentWillUnmount などのライフサイクル関数フックでこれらの副作用関数を記述してきました。 useEffect のいくつかの副作用を解除するにはどうすればいいですか?
'react' から useState、useEffect をインポートします。 関数FriendStatus(props) { const [isOnline、setIsOnline] = useState(null); 関数handleStatusChange(ステータス) { setIsOnline(ステータスがオンライン)。 } 使用効果(() => { ChatAPI.subscribeToFriendStatus(props.friend.id、handleStatusChange); // この順序に注意してください: コンポーネントの次の再レンダリング後、ChatAPI.subscribeToFriendStatus の次の呼び出しの前にクリーンアップを実行するように react に指示します。 関数 cleanup() を返す { ChatAPI.unsubscribeFromFriendStatus(props.friend.id、handleStatusChange); }; }); if (isOnline === null) { '読み込み中...' を返します。 } isOnline を返します? 'オンライン' : 'オフライン'; } 不要な副作用機能をスキップするにはどうすればよいでしょうか? 前のセクションの考え方によれば、これらの副作用関数はレンダリングが再レンダリングされるたびに実行される必要があり、これは明らかに経済的ではありません。不要な計算をスキップするにはどうすればよいでしょうか? 2 番目のパラメータを useEffect に渡すだけです。 2 番目のパラメータを使用して、このパラメータの値が変更された場合にのみ、渡した副作用関数 (最初のパラメータ) を実行するように React に指示します。 使用効果(() => { document.title = `${count} 回クリックしました`; }, [count]); // countの値が変わったときのみ、文`document.title`が再実行されます 2 番目のパラメータとして空の配列 [] を渡すと、実際には最初のレンダリング時にのみそれを実行するのと同じになります。これは、componentDidMount と componentWillUnmount を組み合わせたパターンです。ただし、この使い方はバグの原因になる可能性があるため、あまり頻繁に使用しないでください。 他にどのような組み込みエフェクトフックがありますか? 使用コンテキスト カスタムエフェクトフックを記述するにはどうすればいいですか? なぜエフェクト フックを自分で作成する必要があるのでしょうか。この方法では 例えば、上で書いた FriendStatus コンポーネントから友達がオンラインかどうかを判断する機能を抽出し、特定の ID がオンラインかどうかを判断するためだけの新しい useFriendStatus フックを作成することができます。 'react' から useState、useEffect をインポートします。 関数 useFriendStatus(friendID) { const [isOnline、setIsOnline] = useState(null); 関数handleStatusChange(ステータス) { setIsOnline(ステータスがオンライン)。 } 使用効果(() => { ChatAPI.subscribeToFriendStatus(友人ID、handleStatusChange); 戻り値 () => { ChatAPI.unsubscribeFromFriendStatus(友人ID、handleStatusChange); }; }); isOnline を返します。 } 現時点では、FriendStatus コンポーネントは次のように短縮できます。 関数FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { '読み込み中...' を返します。 } isOnline を返します? 'オンライン' : 'オフライン'; } オンライン情報も表示する必要がある別の友達リストがあるとします。 関数FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); 戻る ( <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li> ); } これにより タロイモフックTaro で Hooks API を使うのはとても簡単です。Taro 独自の Hooks (usePageScroll、useReachBottom など) は @tarojs/taro から導入し、フレームワーク独自の Hooks (useEffect、useState など) は対応するフレームワークから導入します。 import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro固有のフック import { useState, useEffect } from 'react' // フレームワークフック(基本フック) これで、React Hooks の始め方に関する詳細なチュートリアルの記事は終了です。React Hooks に関するより関連性の高い入門コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: OR キーワードを使用した MySql 複数条件クエリ ステートメント
>>: Linux システムの /etc/fstab ファイルの詳細な解釈
目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...
出典: https://blog.csdn.net/qq_44761243/article/deta...
エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...
HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...
この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...
この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...
余計なことは言わないで、コードだけ見てみましょう〜 プロジェクト番号を選択、 sum(case wh...
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...
目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...
DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...
ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...
この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...
これを理解するおそらく、他のオブジェクト指向プログラミング言語でもthis見たことがあり、これがコン...