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 ファイルの詳細な解釈

推薦する

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...

フォーム要素属性の読み取り専用と無効の使用の比較

1) 適用範囲:読み取り専用:input[type="text"],input[...

jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

CEP - 複合イベント処理。ご注文後、一定期間内にお支払いの確認が取れませんでした。タクシーの配...

CentOS 6.4 MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル

Centos6.4 で mysql5.7.18 をインストールするための具体的な手順が全員に共有され...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

Vueにおけるキーの役割と原理の詳細な説明

目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...

Vue はグラフィック検証コードログインを実装します

この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...

QT が MYSQL データベースに接続するための詳細な手順

最初のステップは、対応するデータベースモジュール(sql)をプロジェクトファイル( .pro )に追...

MySQLが基礎データ構造としてB+ツリーを使用する理由

MySQL の基盤となるデータ構造が B+ ツリーであることは誰もが知っていますが、ではなぜ赤黒ツリ...