Dalam projek React, kami sering menggunakan beberapa Cangkuk terbina dalam yang disertakan dengan React, seperti useState, useContext dan useEffect. Tetapi kadangkala, kita mungkin mahu mempunyai Hook dengan tujuan tertentu: contohnya, gunakanData untuk mendapatkan data, gunakanConnect untuk mendapatkan sambungan, dsb. Walaupun Hooks ini tidak ditemui dalam React, React menyediakan cara yang sangat fleksibel untuk anda mencipta Hooks tersuai anda sendiri untuk keperluan anda.
Dalam React anda mesti mengikut konvensyen penamaan berikut:
Komponen React: Nama komponen React mesti ditulis dengan huruf besar Huruf bermula dengan , seperti StatusBar dan SaveButton. Komponen React juga memerlukan untuk mengembalikan sesuatu yang React tahu cara untuk membuat, seperti JSX .
React Hook: Nama cangkuk mesti bermula dengan use, diikuti dengan huruf besar, seperti useState (terbina dalam) atau useStatus (adat ). Tidak seperti komponen React, Hooks tersuai boleh mengembalikan sebarang nilai.
Konvensyen penamaan ini memastikan anda sentiasa boleh melihat komponen dan memahami status, kesan dan ciri React lain yang mungkin "tersembunyi" "Lokasi. Sebagai contoh, jika anda melihat panggilan fungsi getColor() dalam komponen, anda boleh yakin bahawa ia tidak boleh mengandungi keadaan React kerana namanya tidak bermula dengan penggunaan. Walau bagaimanapun, panggilan fungsi seperti useStatus() berkemungkinan mengandungi panggilan ke Hooks lain!
Kod di dalamnya menerangkan apa yang mereka mahu lakukan dan bukannya cara melakukannya .
Inti Cangkuk tersuai ialah berkongsi logik antara komponen. Menggunakan Hooks tersuai boleh mengurangkan pertindihan logik Lebih penting lagi, kod dalam Hooks tersuai menerangkan perkara yang mereka mahu lakukan, bukan cara melakukannya. Apabila anda mengekstrak logik ke dalam Cangkuk tersuai, anda boleh menyembunyikan butiran cara tertentu "sistem luaran" atau panggilan API penyemak imbas dikendalikan, kerana kod komponen menyatakan niat, bukan butiran pelaksanaan. Berikut ialah contoh mudah:
import { useState } from 'react';
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
function increment() {
setCount(count + 1);
}
return [count, increment];
}, yang menerima nilai awal sebagai parameter dan mengembalikan tatasusunan yang mengandungi nilai kiraan semasa dan fungsi untuk menambah kiraan.
Menggunakan Cangkuk tersuai adalah sangat mudah, cuma panggilnya dalam komponen fungsi. Berikut ialah contoh penggunaan useCounter: useCounter
import React from 'react';
import useCounter from './useCounter';
function Counter() {
const [count, increment] = useCounter(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
} dan memanggilnya dalam komponen. Kami memusnahkan tatasusunan yang dikembalikan kepada useCounter dan count dan menggunakannya dalam komponen. increment
di atas sebagai contoh: useCounter
import useCounter from './useCounter';
function Counter() {
const [count1, increment1] = useCounter(0);
const [count2, increment2] = useCounter(100);
return (
<div>
<p>Count1: {count1}</p>
<button onClick={increment1}>Increment1</button>
<p>Count2: {count2}</p>
<button onClick={increment2}>Increment2</button>
</div>
);
}, ia tidak akan menjejaskan Increment2 kerana setiap count1 panggilan adalah bebas dan keadaan dalamannya Juga bebas. useCounter
import { useState, useEffect } from 'react';
function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowWidth;
}import { useState } from 'react';
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.log(error);
return initialValue;
}
});
const setValue = (value) => {
try {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.log(error);
}
};
return [storedValue, setValue];
}import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
setData(json);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
}
};
fetchData();
}, [url]);
return { data, error, isLoading };
}//useFetch.js
import {useState, useEffect} from 'react'
//don't forget to give a url parameter for the function.
const useFetch = (url)=>{
const [data, setData] = useState([])
const getData = async ()=>{
const response = await fetch(url)
const userdata = await response.json()
setData(userdata)
}
useEffect(()=>{
getData()
},[url])
//return data that we will need in other components.
return {data};
}
export default useFetch; sebagai contoh untuk mendapatkan maklumat pengguna: useUserInfo
//useUserInfo.jsx
import { useEffect,useState } from 'react'
const useUserInfo = (userId) => {
const [userInfo, setUserInfo] = useState({})
useEffect(() => {
fetch('/user')
.then(res => res.json())
.then(data => setUserInfo(data))
}, [userId])
return userInfo
}
//Home.jsx
...
const Home = ()=>{
const [userId,setUserId] = useState('103')
const useInfo = useUserInfo(userId)
return (
<>
<div>name:{userInfo.name}</div>
<div>age:{userInfo.age}</div>
...
</>
)
} Apabila pengguna melakukan operasi tertentu userId, sejak setUserId ialah Kami menyediakan nilai terkini pembolehubah keadaan useState, jadi kami boleh menghantarnya sebagai parameter kepada userId Cangkuk tersuai: useUserInfo
const [userId,setUserId] = useState('103') const userInfo = useUserInfo(userId)
kami akan menjadi ditambah dengan userId yang dikemas kini dengan perubahan. userInfo
Bahagian ini menerangkan APIpercubaan yang masih belum dikeluarkan dalam versi React yang stabil. Bahagian ini menerangkan API percubaan yang belum dikeluarkan dalam versi React yang stabil.
你可能希望让组件自定义其行为,而不是完全地将逻辑封装 Hooks 中，我们可以通过将 event handlers 作为参数传递给 Hooks,下面是一个聊天室的例子：useChatRoom 接受一个服务端 url 和 roomId,当调用这个 Hook 的时候，会进行连接，
export function useChatRoom({ serverUrl, roomId }) {
useEffect(() => {
const options = {
serverUrl: serverUrl,
roomId: roomId
};
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
showNotification('New message: ' + msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl]);
}假设当连接成功时，你想将此逻辑移回你的组件：
export default function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
useChatRoom({
roomId: roomId,
serverUrl: serverUrl,
onReceiveMessage(msg) {
showNotification('New message: ' + msg);
}
});
// ...要做到这一点，改变你的自定义 Hook ，把 onReceiveMessage 作为它的命名选项之一:
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
useEffect(() => {
const options = {
serverUrl: serverUrl,
roomId: roomId
};
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
onReceiveMessage(msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}这可以工作，但是当你的自定义 Hook 接受事件处理程序时，你还可以做一个改进。
在 onReceiveMessage 上添加依赖并不理想，因为它会导致每次组件重新渲染时聊天都重新连接。将此事件处理程序包装到 EffectEvent 中以将其从依赖项中移除:
import { useEffect, useEffectEvent } from 'react';
// ...
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
const onMessage = useEffectEvent(onReceiveMessage);
useEffect(() => {
const options = {
serverUrl: serverUrl,
roomId: roomId
};
const connection = createConnection(options);
connection.connect();
connection.on('message', (msg) => {
onMessage(msg);
});
return () => connection.disconnect();
}, [roomId, serverUrl]); // ✅ All dependencies declared
}现在不会在每次重新渲染聊天室组件时进行重新连接。
自定义 Hooks 可以帮助你迁移到更好的开发范式。通过将一些通用逻辑封装在自定义 Hooks 中，你可以使组件代码保持简洁并专注于核心意图,这有助于减少重复性的代码，并使你的代码更易于维护和更新，从而使你能够更快速地开发新功能。
对于 Effect 而言,这样可以使数据在 Effects 中流动的过程变得非常明确。这让你的组件能够专注于意图，而不是 Effects 的具体实现。当 React 添加新功能时，你可以删除那些 Effects 而不影响任何组件。就像设计系统一样，你可能会发现从应用程序组件中提取常见习惯用法到自定义 Hooks 中是有非常帮助的。这将使你的组件代码专注于意图，并允许你避免频繁编写原始 Effects，这也是 React 开发者所推崇的。
(Belajar perkongsian video: Video Pengaturcaraan Asas)
Atas ialah kandungan terperinci Pemahaman mendalam tentang Hooks tersuai React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Adakah python bahagian hadapan atau belakang?
Cara melaksanakan pemesejan segera pada bahagian hadapan
Perbezaan antara front-end dan back-end
Pengenalan kepada hubungan antara php dan front-end
WeChat Moments tidak boleh dimuat semula
Pengenalan kepada kaedah pelaksanaan kesan khas Java
Apakah itu pemalam penyemak imbas
Pengaturcaraan bahasa peringkat tinggi
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
