自定义Hooks是React中用于逻辑复用的函数，以use开头，可封装状态与副作用。例如useLocalStorage管理本地存储，useFetch处理数据请求，支持组合与扩展，提升代码可维护性。
在React开发中，自定义Hooks是提取和复用组件逻辑的核心手段。它们不负责UI渲染，而是专注于封装可复用的状态管理与副作用处理逻辑。通过自定义Hooks，你可以将分散在多个组件中的相似逻辑集中管理，提升代码的可读性与维护性。
什么是自定义Hooks
自定义Hooks是以use开头的JavaScript函数，内部可以调用其他Hooks（如useState、useEffect等）。它不返回JSX，而是返回状态值和相关操作方法。只要遵循命名规范和调用规则，React就能正确识别并处理其内部的Hook调用。
例如，一个管理本地存储的简单Hook：
function useLocalStorage(key, initialValue) {const [value, setValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});
useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error('Failed to save to localStorage', error);
}
}, [key, value]);
return [value, setValue];
}
这个Hook封装了读取、更新状态并同步到localStorage的完整流程，任何组件都可以直接使用。
如何设计良好的自定义Hook
设计高质量的自定义Hook需要关注职责单一、接口清晰和可扩展性。
- 明确目的：每个Hook应解决一个具体问题，比如表单处理、数据请求或设备API监听
- 参数灵活：接受配置项作为参数，提高通用性。例如支持默认值、延迟设置、错误重试等选项
- 暴露必要接口：返回值应包含外部需要的操作方法和当前状态，结构尽量简洁直观
- 处理边界情况：包括加载状态、错误捕获、资源清理（如事件监听器移除）
以数据请求为例：
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (!url) return;
let isMounted = true;
fetch(url)
.then(res => res.json())
.then(json => {
if (isMounted) setData(json);
})
.catch(err => {
if (isMounted) setError(err);
})
.finally(() => {
if (isMounted) setLoading(false);
});
return () => { isMounted = false };
}, [url]);
return { data, loading, error };
}
组件只需关心结果，无需重复实现请求逻辑。
组合多个Hooks构建复杂能力
自定义Hook的强大之处在于能组合已有Hook形成更高阶的抽象。
比如结合useReducer和useContext实现轻量状态管理，或用useRef追踪上一次的值：
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
这种模式可用于比较前后值变化、记录历史状态等场景。
基本上就这些。自定义Hooks的本质是逻辑的聚合与抽象，合理使用能让组件更专注UI表现，也让状态逻辑更容易测试和维护。
