VUE3.0 をすぐに使い始める方法: 学習に入る
フックは、クラスを作成せずに状態やその他の React 機能を使用するために使用されます。それでは、フックとは一体何なのか、なぜフックを使用する必要があるのか、React が提供する一般的なフックは何なのか、そしてフックをカスタマイズする方法は次のとおりです。
フックは、外部関数にフックする機能コンポーネント内の関数です。
React はいくつかの共通フックを提供しており、React はカスタム フックもサポートしています。これらのフックは、関数に外部関数を導入するために使用されます。
コンポーネントに外部関数を導入する必要がある場合、React が提供するフックを使用するか、フックをカスタマイズできます。
例えば、コンポーネントに状態を管理する機能を導入する場合、useState関数を使用することができます。useStateの使い方を以下に詳しく紹介します。
フックを使用するフックを使用する主な理由は 2 つあります。
フックが登場する前、React はロジックの再利用を実現するために、上位コンポーネントやレンダリング プロップなどの複雑なデザイン パターンを借用する必要がありましたが、上位コンポーネントは冗長なコンポーネント ノードを生成するため、デバッグがより複雑になります。
フックを使用すると、コンポーネント構造を変更せずに状態ロジックを再利用できます。カスタム フックの使用法については、以下で詳しく紹介します。
クラスコンポーネントでは、同じビジネスロジックのコードがコンポーネントの異なるライフサイクル機能に分散されており、フックによって同じビジネスロジックのコードをまとめてビジネスロジックをまとめることができます。明確に分離されているため、コードの理解と保守が容易になります。
useState は、React 関数コンポーネントに状態を追加できるようにするフックです。
使用例は次のとおりです。
import React, { useState } from 'react';
関数 Example() {
// "count" という状態変数を宣言します const [count, setCount] = useState(0);
// ...上記のコードは、状態変数 count を初期値 0 で宣言し、setCount を呼び出して現在のカウントを更新します。
useEffect を使用すると、関数コンポーネントで副作用操作を実行できます。
副作用とは、現在の実行結果とは何の関係もないコードのことを指します。一般的な副作用操作には、データの取得、サブスクリプションの設定、React コンポーネントの DOM の手動変更などがあります。
useEffect は 2 つのパラメーターを受け取ることができます。コードは次のとおりです。
useEffect(callback, dependency)
最初のパラメーターは実行される関数コールバックで、2 番目のパラメーターはオプションの依存関係配列の依存関係です。
依存関係はオプションです。指定しない場合、コールバックは関数コンポーネントが実行されるたびに実行されます。指定した場合は、依存関係の値が変更された場合にのみ実行されます。
使用例は次のとおりです。
function Example() {
const [カウント, setCount] = useState(0);
//componentDidMountとcomponentDidUpdateに似ています:
useEffect(() => {
// ブラウザ API を使用してドキュメントのタイトルを更新します
document.title = `${count} 回クリックしました`;
return() => {
// クラスcomponentのcomponentWillUnmountと同等でクリアに使用可能
}
}, [count]); // 依存関係を count として指定し、count が更新されたときに副作用を実行します // ...上記のコードは、useEffect を使用して依存関係の数が更新されたときに副作用関数を実装し、それをクリアします。コールバック関数を返すことで、最後の実行結果が返されます。
さらに、useEffect は副作用を実行するための 4 つのタイミングを提供します。
useCallback で定義されたコールバック関数は、依存関係が変更された場合にのみコールバック関数を再宣言するため、コンポーネントが重複したコールバック関数を作成しないことが保証されます。このコールバック関数を属性として受け取るコンポーネントは、頻繁に再レンダリングする必要はありません。
使用例は次のとおりです。
const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b])上記のコードは、依存関係 a と b が変更された場合にのみコールバック関数を再宣言します。
useMemo で定義された作成関数は、特定の依存関係が変更された場合にのみ再計算されます。これは、レンダリングされるたびに繰り返されないオーバーヘッドの高い計算に役立ちます。また、この計算された値をプロパティとして受け取るコンポーネントは再計算されません。頻繁に再レンダリングが必要です。
使用例は次のとおりです。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
上記のコードは、依存関係 a と b が変更された場合にのみ再計算されます。
useRef は、コンポーネントのライフサイクル全体にわたって持続する ref オブジェクトを返します。
これには 2 つの用途があります。DOM
DOM ノードを保存する方法の例は次のとおりです。
function TextInputWithFocusButton() {
const inputEl = useRef(null)
const onButtonClick = () => {
// `current` は、DOM にマウントされているテキスト入力要素 inputEl.current.focus() を指します。
}
戻る （
<>
<input ref={inputEl} type='text' />
<button onClick={onButtonClick}>入力に集中する</button>
</>
)
上記のコードは、
useRef を通じて ref オブジェクトを作成し、DOM ノードの参照を保存し、ref.current に対して DOM 操作を実行できます。
複数のレンダー間でデータを共有する例は次のとおりです:
import React, { useState, useCallback, useRef } from 'react'
デフォルト関数 Timer() をエクスポート {
//タイミングの累積時間を保存するための時間状態を定義 const [time, setTime] = useState(0)
// タイマーを定義します。このようなコンテナは、コンポーネント間のレンダリングの間に変数を保存するために使用されます。 const timer = useRef(null)
// タイミングを開始するイベント ハンドラー関数 const handleStart = useCallback(() => {
// current 属性を使用して ref の値を設定します timer.current = window.setInterval(() => {
setTime((時間) => 時間 + 1)
}、100)
}、[])
//一時停止タイミングイベント処理関数 const handlePause = useCallback(() => {
// タイミングを停止するには、clearInterval を使用します window.clearInterval(timer.current)
timer.current = null
}、[])
戻る （
<div>
{時間 / 10} 秒。
<br />
<button onClick={handleStart}>開始</button>
<button onClick={handlePause}>一時停止</button>
</div>
)
上記のコードは、
useRef を通じて timer という変数名を持つ ref オブジェクトを作成します。このオブジェクトは、コンポーネント間でレンダリングするときに呼び出すことができ、タイミングの開始時に新しいタイマーを作成し、タイミングの一時停止時にタイマーをクリアします。
useContext は、コンテキスト オブジェクトを受信し、コンテキストの値を返すために使用されます。これにより、レベル間のデータ共有を実現できます。
例は次のとおりです。
//コンテキスト オブジェクトを作成します const MyContext = React.createContext(initialValue)
関数 App() {
戻る （
// Context.Provider を通じてコンテキストの値を渡します <MyContext.Provider value='1'>
<コンテナ>
</MyContext.Provider>
)
}
関数コンテナ() {
<テスト /> を返す
}
関数テスト() {
// コンテキストの値を取得します const theme = useContext(MyContext) // 1
<div></div> を返す
上記のコードは、
useContext を通じて App コンポーネントで定義された Context を取得し、階層コンポーネント間でのデータ共有を実現します。
useReducerはReducer機能を導入するために使用されます。
例は次のとおりです。
const [state,dispatch] = useReducer(reducer,initialState)
Reducer 関数と状態の初期値をパラメータとして受け取り、配列を返します。配列の最初のメンバーは状態の現在の値で、2 番目のメンバーはアクションを送信するディスパッチ関数です。
カスタム フックを通じて、コンポーネント ロジックを再利用可能な関数に抽出できます。
カスタム フックは、通常の関数とは異なる 2 つの特徴を持つ関数です。
例は次のとおりです:
import { useState, useCallback } from 'react'
関数 useCounter() {
// count を定義します。この状態は現在の値を保存するために使用されます const [count, setCount] = useState(0)
// 1を加算する演算を実装 const increment = useCallback(() => setCount(count + 1), [count])
// 1デクリメントの演算を実装 const decrement = useCallback(() => setCount(count - 1), [count])
//カウンターをリセットする const reverse = useCallback(() => setCount(0), [])
// 呼び出し元が使用できるようにビジネス ロジック操作をエクスポートします return { count, increment, decrement, replace }
}
// コンポーネント 1
関数 MyComponent1() {
const { カウント、インクリメント、デクリメント、リセット } = useCounter()
}
// コンポーネント 2
関数 MyComponent2() {
const { カウント、インクリメント、デクリメント、リセット } = useCounter()
上記のコードは、
フック useCounter をカスタマイズすることで、MyComponent1 コンポーネントと MyComponent2 コンポーネントの間でビジネス ロジックを簡単に再利用します。
React は、直接使用できる多数のカスタム フックをカプセル化する反応使用ライブラリを公式に提供しており、コンポーネントの内部ロジックを簡素化し、コードの可読性と保守性を向上させるのに役立ちます。
その中で、一般的に使用されるカスタム フックは次のとおりです:
使い方については、react-use 公式 Web サイトにアクセスしてください。
この記事では、Hooks とは何か、Hooks を使用する理由、React が提供する一般的な Hooks、Hooks のカスタマイズ方法の 4 つの側面から React Hooks を紹介しました。皆さんは React Hooks についてより深く理解できたと思います。
お役に立てば幸いです、読んでいただきありがとうございます~