In React projects, we often use several built-in Hooks that come with React, such as useState, useContext and useEffect. But sometimes, we may want to have a Hook with a specific purpose: for example, useData to get data, useConnect to get connections, etc. Although these Hooks are not found in React, React provides a very flexible way for you to create your own custom Hooks for your needs.
In React you must follow the following naming convention:
React Component: React component names must be capitalized with Letters starting with , such as StatusBar and SaveButton. React components also need to return something that React knows how to render, such as JSX .
React Hook: Hook name must start with use, followed by a uppercase letter, such as useState (built-in) or useStatus (custom ). Unlike React components, custom Hooks can return any value.
This naming convention ensures that you can always view the component and understand its status, effectsand other React features that may be "hidden"Location. For example, if you see a getColor() function call in a component, you can be sure that it cannot contain React state because its name does not start with use. However, function calls like useStatus() are likely to contain calls to other Hooks!
The code inside them describes what they want to do rather than how to do it .
The core of custom Hooks is the logic between shared components. Using custom Hooks can reduce repetitive logic. More importantly, the code inside custom Hooks describes what they want to do, not how to do it. When you extract logic into custom Hooks, you can hidethe detailsof how to handle calls to certain "external systems" or browser APIs, as the component's code expresses Your intent, not implementation details. The following is a simple example:
import { useState } from 'react';
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
function increment() {
setCount(count + 1);
}
return [count, increment];
}useCounter. It accepts an initial value as a parameter and returns an array containing the current count value and an increment count. function.
Using a custom Hook is very simple, just call it in the function component. Here is an example of using 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>
);
}useCounter and called it in the component. We destructure the returned array into count and increment and use them in the component.
useCounter as an example:
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>
);
}Increment2, it will not affect count1, because each The calls to useCounter are all independent, and their internal states are also independent.
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;useUserInfo as an example to obtain user information:
//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>
...
</>
)
}userId state variable. When the user performs a certain operation setUserId , since useState provides us with the latest value of the userId state variable, we can pass it as a parameter to the custom useUserInfo Hook :
const [userId,setUserId] = useState('103') const userInfo = useUserInfo(userId)
userInfo will be updated as userId changes.
This section describes anexperimental API that has not yet been released in a stable version of React. This section describes an experimental API that is not yet released in a stable version of React.
你可能希望让组件自定义其行为,而不是完全地将逻辑封装 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 开发者所推崇的。
(Learning video sharing: Basic Programming Video)
The above is the detailed content of In-depth understanding of React's custom Hooks. For more information, please follow other related articles on the PHP Chinese website!
Is python front-end or back-end?
How to implement instant messaging on the front end
The difference between front-end and back-end
Introduction to the relationship between php and front-end
WeChat Moments cannot be refreshed
Introduction to Java special effects implementation methods
What is a browser plug-in
High-level language programming
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
