Reactフック入門チュートリアル

Reactフック入門チュートリアル

ステートフック

例:

'react' から useState をインポートします。

関数の例() {
 定数[count, setCount] = useState(0);
//count: 宣言された変数; setCount: カウント値を変更する関数; 0: カウントの初期値 return (
  <div>
   <p>クリック回数は {count} 回です</p>
   <ボタンのクリック時={() => setCount(count + 1)}>
    クリックしてください
   </ボタン>
  </div>
 );
}

useState は react に付属するフック関数であり、その機能は状態変数を宣言することです。 useState 関数が受け取るパラメータは初期状態です。配列を返します。この配列の [0] 番目の項目は現在の状態値で、[1] 番目の項目は状態値を変更できるメソッド関数です。
実際に行ったのは聲明了一個狀態變量count,把它的初始值設為0,同時提供了一個可以更改count的函數setCountことです。

ユーザーがボタンをクリックすると、setCount 関数が呼び出され、新しい状態値がパラメーターとして受け取られます。次に、React に任せて、Example コンポーネントを再レンダリングします。

コンポーネントに複数の状態値がある場合はどうなりますか?
まず、 useState是可以多次調用的ため、次のように記述できます。

関数 ExampleWithManyStates() {
 定数[年齢、年齢の設定] = useState(42);
 const [フルーツ、setFruit] = useState('バナナ');
 const [todos, setTodos] = useState([{ text: 'フックを学ぶ' }]);
}

第二に、useState が受け取る初期値は、文字列/数値/ブール値などの単純なデータ型である必要はありません。オブジェクトまたは配列をパラメーターとして受け取ることができます。注目すべき唯一の点は、以前の this.setState は状態をマージして新しい状態を返しましたが、 useState是直接替換老狀態后返回新狀態です。

一方で、フックはクラスではなく関数内で直接使用されます。他方では、各フックは互いに独立しており、同じフックを呼び出す異なるコンポーネントは、それぞれの状態の独立性を確保できます。

react はどのようにして複数の useStates の独立性を確保するのでしょうか?

答えは、 react是根據useState出現的順序來定的です。詳しく見てみましょう

//最初のレンダリング 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就相當與這些聲明周期函數鉤子的集合體。 3対1です。

useEffect のいくつかの副作用を解除するにはどうすればいいですか?

傳給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 を組み合わせたパターンです。ただし、この使い方はバグの原因になる可能性があるため、あまり頻繁に使用しないでください。

他にどのような組み込みエフェクトフックがありますか?

使用コンテキスト
使用Reducer
コールバックの使用
メモを使う
参照を使う
命令型メソッドを使用する
ミューテーションエフェクトの使用
レイアウト効果を使用する

カスタムエフェクトフックを記述するにはどうすればいいですか?

なぜエフェクト フックを自分で作成する必要があるのでしょうか。この方法では把可以復用的邏輯抽離出來,變成一個個可以隨意插拔的“插銷”使用したいコンポーネントにプラグインできます。

例えば、上で書いた 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React 入門レベルの詳細なメモ
  • React Native の基礎: Flexbox レイアウトの初期使用
  • React Native の基礎: React Native アプリケーションのデバッグへの小さな一歩
  • react-reduxプラグインの詳細な紹介
  • React 高階コンポーネントの紹介
  • React を使い始める上で重要な知識ポイントをご存知ですか?

<<:  OR キーワードを使用した MySql 複数条件クエリ ステートメント

>>:  Linux システムの /etc/fstab ファイルの詳細な解釈

推薦する

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

CSS の 6 つの重要なセレクター (3 秒で覚える)

出典: https://blog.csdn.net/qq_44761243/article/deta...

Vue が Bibibili のホームページを模倣する際の問題

エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

統計量に対するmySql SQLクエリ操作

余計なことは言わないで、コードだけ見てみましょう〜 プロジェクト番号を選択、 sum(case wh...

...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...

JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...

Vue カプセル化コンポーネント アップロード画像コンポーネント

この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...

JavaScriptのポイントごとのシリーズでこれは何ですか

これを理解するおそらく、他のオブジェクト指向プログラミング言語でもthis見たことがあり、これがコン...