React のフックと利点

反応する

React は、コンポーネントに基づいてインターフェイスを構築するためのフロントエンド JavaScript ライブラリとして、フロントエンド開発者の間で人気を集めています。 2013 年に Facebook によって開始され、現在は Meta によって維持されています。 React はオープンソースであり、その主な使用例は、ユーザー インターフェイスと DOM へのコンポーネントのレンダリングに重点を置いた単一ページの Web アプリケーションの開発です。

React アプリケーションは、ルーティングやその他のクライアント側の機能をライブラリに依存します。 React の主な利点は、ページの変更された部分のみを再レンダリングするため、変更されていない DOM 要素の不必要な再レンダリングを回避できることです。

主な特長

宣言型
React では、宣言型プログラミング パラダイムに従い、開発者はアプリケーションの各状態のビューを設計し、データの変更に応じてビューが更新され、コンポーネントがレンダリングされます。命令型プログラミングと比較すると、段階的に「どのように」実行されるかではなく、「何を」実行するか、最終ページがどのように見えるかに重点が置かれています。

コンポーネント
React のコードは、モジュール式で再利用可能なエンティティであるコンポーネントで構成されます。通常、アプリケーションには複数のコンポーネント層があり、それらは DOM 内のいわゆるルート要素にレンダリングされます。コンポーネントのレンダリング中、値はプロパティ (props) を通じてコン​​ポーネント間で渡されます。コンポーネントの内部の値は状態と呼ばれます。

反応フック
React 16.8 (2019) 以降で利用可能な React Hook は、開発者が関数コンポーネントから React の状態およびライフサイクル機能にフックできるようにする関数です。重要なのは、フックを使用すると、開発者はクラスを使用せずに React の機能を使用できるようになります。プログラマーがクラスコンポーネントに依存する必要が少なくなるため、これは大きな利点と考えられます。

クラスコンポーネント
クラスは機能コンポーネントと同様に動作します。ただし、状態イベントとライフサイクル イベントを管理するためにフックを使用する代わりに、React.Component 基本クラスのライフサイクル メソッドを使用します。

ルーティング
React にはルーティングのサポートが組み込まれていないため、サードパーティのライブラリを使用してルーティングを処理できます。これにより、開発者はルートを簡単に定義し、ナビゲーションを管理し、URL の変更を処理できるようになります。

仮想 DOM
React は内部データ構造を使用し、結果として生じる差異を計算し、表示される DOM を効率的に更新するため、仮想ドキュメント オブジェクト モデル (DOM) は重要な機能です。これにより、開発者は、React が実際に変更されるコンポーネントのみをレンダリングする一方で、変更のたびにページ全体がレンダリングされるかのようにコードを書くことができます。これによりパフォーマンスが向上します。

反応フック

前述したように、フックは React 16.8 に新しく追加されたものです。これらを使用すると、クラスを作成せずに状態やその他の React 機能を使用できるようになります。

参考:
React ドキュメント

useState
useState は、コンポーネントに状態変数を追加できる React フックです。

参考:
useState

例

import { useState } from ‘react’;
function MyComponent() {
const [年齢, setAge] = useState(28);
const [name, setName] = useState('Taylor');
const [todos, setTodos] = useState(() => createTodos());
// …

規則では、配列の構造化を使用して [something, setSomething] のような状態変数に名前を付けます。

パラメータには、初期状態に設定する値であるinitialStateが含まれます。任意の型の値を指定できますが、関数には特別な動作があります。この引数は、最初のレンダリング後は無視されます。

useState は、次の 2 つの値を含む配列を返します:

1. 現在の状態。最初のレンダリング中に、渡したinitialStateと一致します。
2. 状態を別の値に更新し、再レンダリングをトリガーできる設定関数。

useEffect
useEffect は、コンポーネントを外部システムと同期できるようにする React フックです。

例
useEffect(セットアップ、依存関係)

エフェクトを宣言するためにコンポーネントのトップレベルで呼び出されます。

setup はエフェクトのロジックを備えた関数です。セットアップ関数は、オプションでクリーンアップ関数を返すこともあります。コンポーネントが DOM に追加されると、React はセットアップ関数を実行します。依存関係を変更して再レンダリングするたびに、React は最初に古い値でクリーンアップ関数を実行し、次に新しい値でセットアップ関数を実行します。

依存関係はオプションであり、これはセットアップ コード内で参照されるすべてのリアクティブ値のリストです。リアクティブ値には、props、state、およびコンポーネント本体内で直接宣言されたすべての変数と関数が含まれます。

重要なポイント

React の主な利点の 1 つは、世界で最も人気のあるプログラミング言語の 1 つである JavaScript を使用していることです。 React は使いやすく、学習も一般的に簡単で、Web アプリケーションのパフォーマンスと相互運用性が向上します。

以上がReact のフックと利点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。