要编写一个名为 useProgress 的自定义 hook,该 hook 接受一个初始进度值和一个更新进度的回调函数。该 hook 还返回一个包含当前进度和更新进度函数的对象。
以下是示例代码:
import { useState, useEffect } from 'react';
function useProgress(initialProgress, updateProgress) {
const [progress, setProgress] = useState(initialProgress);
useEffect(() => {
updateProgress(progress);
}, [progress, updateProgress]);
return {
progress,
setProgress
};
}
// Using the custom hook
function MyComponent() {
const updateProgress = (progress) => {
console.log(`Current progress: ${progress}`);
};
const { progress, setProgress } = useProgress(0, updateProgress);
const handleButtonClick = () => {
setProgress(progress + 10);
};
return (
Current progress: {progress}
);
}
这是使用该自定义 hook 的示例组件 MyComponent。通过调用 useProgress 进行初始化并获取当前进度和更新进度函数,然后可以使用 setProgress 更新进度值,每当进度值更新时,都会调用回调函数 updateProgress。