React 愛好家の皆さん、こんにちは!あなたも私と同じなら、React でユーザー インターフェイスを簡単に構築できるところが気に入っているでしょう。しかし、場合によっては、異なるコンポーネント間で同じロジックを繰り返していることに気づくことがあります。そこでカスタム フックが登場します。カスタム フックは、コードをよりクリーンかつ効率的にする秘密の超能力のようなものです。カスタム フックの世界に飛び込んで、カスタム フックがどのように React ゲームを向上させることができるかを見てみましょう。
まず最初に、フックとは何かについて簡単にまとめてみましょう。 React 16.8 で導入されたフックを使用すると、クラスを作成せずに状態やその他の React 機能を使用できるようになります。最も人気のある組み込みフックには、useState、useEffect、useContext などがあります。
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
この簡単な例では、useState と useEffect が連携して状態と副作用を管理します。クリーンでシンプル、そしてパワフルです。
カスタム フックは、再利用性とコンポーネントをクリーンに保つことがすべてです。これらを使用すると、コンポーネント間でロジックを抽出して共有できます。便利な機能を保存し、必要なときにいつでも使用できる、個人的なツールボックスと考えてください。
API からデータをフェッチする必要があるコンポーネントがいくつかあると想像してください。各コンポーネントに同じフェッチ ロジックを記述する代わりに、それを処理するカスタム フックを作成できます。 useFetch を作成しましょう。
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;
import React from 'react';
import useFetch from './useFetch';
function DataFetchingComponent() {
const { data, loading, error } = useFetch('https://api.example.com/data');
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>Data</h1>
<pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
カスタム フックは、必要に応じて簡単にすることも、複雑にすることもできます。フォーム入力を管理するためのフック useForm.
を使って一歩進んでみましょう。import { useState } from 'react';
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const handleChange = (event) => {
const { name, value } = event.target;
setValues({
...values,
[name]: value,
});
};
const resetForm = () => {
setValues(initialValues);
};
return { values, handleChange, resetForm };
}
export default useForm;
### Using `useForm`
import React from 'react';
import useForm from './useForm';
function FormComponent() {
const { values, handleChange, resetForm } = useForm({ username: '', email: '' });
const handleSubmit = (event) => {
event.preventDefault();
console.log(values);
resetForm();
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" name="username" value={values.username} onChange={handleChange} />
</label>
<br />
<label>
Email:
<input type="email" name="email" value={values.email} onChange={handleChange} />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default FormComponent;
カスタム フックは、React コードをよりモジュール化し、読みやすく、保守しやすくするための素晴らしい方法です。共通のロジックをカスタム フックに抽出することで、コンポーネントは最も得意とすること、つまり UI のレンダリングに集中し続けることができます。
プロジェクトでカスタム フックの実験を開始します。信じてください、一度使い始めると、これなしでどうやって生きていたのか不思議に思うでしょう。コーディングを楽しんでください!
以上がカスタムフックで React ゲームをレベルアップする: 楽しくて実践的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
