React学习—React Hooks 完全指南：从原理到实战-CSDN博客

本文链接：https://blog.csdn.net/2301_80724091/article/details/147624780

引言：React 开发的新篇章

自2019年React 16.8正式引入Hooks以来，函数式组件完成了从"二等公民"到React开发核心的华丽转身。本文将深入剖析Hooks的设计哲学，通过实战案例演示其应用场景，并分享最佳实践，带您全面掌握这一革命性特性。

一、Hooks 设计哲学

1.1 类组件的痛点

生命周期方法带来的逻辑碎片化
高阶组件导致的"嵌套地狱"
状态逻辑难以跨组件复用

1.2 函数式编程新范式

关注点分离：将组件拆分为更小的函数单元
逻辑复用：通过自定义Hooks实现业务逻辑抽象
渐进式采用：与类组件无缝兼容

二、核心Hooks深度解析

2.1 useState：状态管理革命

function Counter() {
  const [count, setCount] = useState(0);
  // 使用函数式更新保证状态一致性
  const increment = () => setCount(prev => prev + 1);
  
  return <button onClick={increment}>{count}</button>;
}

2.2 useEffect：副作用管理大师

useEffect(() => {
  const subscription = dataSource.subscribe();
  // 清理函数防止内存泄漏
  return () => subscription.unsubscribe();
}, [dataSource]); // 依赖数组优化性能

2.3 useContext：跨组件通信利器

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme }}>...</div>;
}

三、进阶Hooks实战技巧

3.1 useReducer：复杂状态管理

function todosReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, action.payload];
    // ...其他case
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  // 分发动作管理复杂状态
}

3.2 useCallback & useMemo：性能优化双刃剑

const memoizedCallback = useCallback(
  () => doSomething(a, b),
  [a, b] // 依赖项变化时重新创建
);

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]
);

四、自定义Hooks：打造你的武器库

4.1 封装数据请求Hook

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 使用示例
function UserProfile({ userId }) {
  const { data: user } = useFetch(`/api/users/${userId}`);
  // ...
}

4.2 实现防抖Hook

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}