嘿，React 愛好者們！如果你像我一樣，你會喜歡 React 如何讓建立使用者介面變得輕而易舉。但有時，我們發現自己在不同的元件中重複相同的邏輯。這就是自訂鉤子的用武之地——它們就像秘密的超能力，使我們的程式碼更乾淨、更有效率。讓我們深入了解自訂 Hook 的世界，看看它們如何提升我們的 React 遊戲。
首先，讓我們快速回顧一下 Hooks 是什麼。 React 16.8 中引入了鉤子，讓您無需編寫類別即可使用狀態和其他 React 功能。一些最受歡迎的內建鉤子是 useState、useEffect 和 useContext。
從 'react' 導入 React, { useState, useEffect };
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。
開始在您的專案中嘗試自訂掛鉤。相信我，一旦你開始使用它們，你就會想知道沒有它們你是如何生活的。快樂編碼！
以上是使用自訂 Hook 提升您的 React 遊戲：有趣且實用的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
