js 实现hooks
实现自定义 Hooks 的基本方法
在 JavaScript 中实现自定义 Hooks 需要遵循 React Hooks 的规则。自定义 Hooks 本质上是将组件逻辑提取到可重用的函数中。
自定义 Hooks 必须以 "use" 开头命名，这样 React 才能识别它是一个 Hook。函数内部可以调用其他 Hooks，如 useState、useEffect 等。
function useCustomHook(initialValue) {
const [value, setValue] = useState(initialValue);
useEffect(() => {
// 副作用逻辑
}, [value]);
return [value, setValue];
}常见自定义 Hooks 示例
useToggle Hook
创建一个在 true 和 false 之间切换的 Hook：
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => {
setValue(v => !v);
}, []);
return [value, toggle];
}useFetch Hook
创建一个用于数据获取的 Hook：
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}Hooks 规则和最佳实践
自定义 Hooks 必须遵循 React Hooks 的基本规则：只能在 React 函数组件或自定义 Hooks 中调用 Hooks，不能在普通 JavaScript 函数中调用。
自定义 Hook 应该专注于单一功能，保持简洁和可重用性。复杂的逻辑可以拆分成多个小型 Hooks。
// 不好的做法：一个 Hook 做太多事情
function useComplexHook() {
// 太多不相关的逻辑
}
// 好的做法：拆分成专注的 Hooks
function useDataFetching() {}
function useUIState() {}测试自定义 Hooks
测试自定义 Hooks 需要使用 React 测试工具，如 @testing-library/react-hooks：
import { renderHook } from '@testing-library/react-hooks';
import useCounter from './useCounter';
test('should increment counter', () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});性能优化考虑
自定义 Hooks 中可以使用 useMemo 和 useCallback 来优化性能，避免不必要的重新计算和重新渲染。
function useExpensiveCalculation(input) {
const result = useMemo(() => {
// 昂贵的计算
return computeExpensiveValue(input);
}, [input]);
return result;
}通过遵循这些模式和最佳实践，可以创建高效、可维护和可重用的自定义 Hooks，帮助简化组件逻辑并促进代码复用。
