React Hooks 最佳实践

基础 Hooks

useState

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

useEffect

// 组件挂载和更新
useEffect(() => {
    document.title = `Count: ${count}`;
});

// 仅挂载时执行
useEffect(() => {
    console.log("Mounted");
}, []);

// 依赖变化时执行
useEffect(() => {
    fetchData(userId);
}, [userId]);

// 清理函数
useEffect(() => {
    const timer = setInterval(() => {}, 1000);
    return () => clearInterval(timer);
}, []);

自定义 Hooks

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(setData)
            .finally(() => setLoading(false));
    }, [url]);
    
    return { data, loading };
}

性能优化

useMemo

const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
}, [a, b]);

useCallback

const handleClick = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

常见陷阱

1. 忘记依赖项
2. 条件调用 Hooks
3. 过度优化
4. 闭包陷阱