react自定义hooks实战
时间: 2025-04-17 07:13:37 浏览: 16
### 创建和使用 React 自定义 Hooks 进行实际项目开发
#### 定义自定义 Hook
自定义 Hook 提供了一种机制,用于提取组件逻辑并将其封装成可重用的功能模块。这种做法不仅提高了代码的可读性和可维护性,而且使得复杂的业务逻辑能够被轻松共享。
考虑一个简单的例子,在多个地方都需要处理定时刷新某个资源的需求:
```javascript
import { useState, useEffect } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// 记住最新一次传递给useEffect的callback函数
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// 设置间隔执行回调
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
```
此 `useInterval` 自定义 Hook 可以让任何希望每隔一段时间触发特定操作的地方重复利用这段逻辑而无需重新编写相同的代码[^1]。
#### 使用自定义 Hook
接下来展示如何在一个具体的应用场景下运用上述自定义 Hook 来实现页面元素每秒自动增加计数值的效果:
```jsx
import React, { useState } from 'react';
import useInterval from './useInterval'; // 假设上面定义好的Hook放在同一目录下的文件中
export default function CounterComponent() {
const [count, setCount] = useState(0);
useInterval(() => {
// 更新状态
setCount((prevCount) => prevCount + 1);
}, 1000); // 每隔一秒调用一次
return (
<div>
<h1>当前计数: {count}</h1>
</div>
);
}
```
在这个实例里,通过引入之前创建的 `useInterval` Hook 并传入适当参数,实现了周期性的状态更新行为,从而简化了原本可能较为繁琐的手动管理定时器的过程[^2]。
阅读全文
相关推荐


















