React钩子函数完全指南：从useState到useEffect的实战详解与场景剖析

React钩子函数（Hooks）自推出以来彻底改变了开发者的工作方式，让函数组件也能拥有状态和生命周期能力。本文将深入探讨常见Hooks的核心用途、实际应用场景，以及如何避免常见陷阱，帮助开发者高效构建现代React应用。

useState：让函数组件拥有状态管理能力

useState是React中最基础的Hook，用于在函数组件中添加局部状态。它返回一个状态变量和更新该变量的函数，初始状态可通过参数传递。

javascript 复制代码

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

典型场景包括表单输入控制、计数器、开关状态等。例如实现一个动态计数器：

javascript 复制代码

function Counter() {  
  const [count, setCount] = useState(0);  
  return (  
    <div>  
      <p>当前计数: {count}</p>  
      <button onClick={() => setCount(count + 1)}>增加</button>  
    </div>  
  );  
}

注意状态更新是异步的，多次连续调用setCount可能不会立即反映最新值。

useEffect：处理副作用与生命周期

useEffect用于执行副作用操作，如数据获取、订阅或手动修改DOM。它相当于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount的结合体。

javascript 复制代码

useEffect(() => {  
  document.title = `点击次数: ${count}`;  
}, [count]); // 仅在count变化时执行

常见场景包括API调用、事件监听和清理资源。例如订阅数据源并在组件卸载时取消订阅：

javascript 复制代码

useEffect(() => {  
  const subscription = dataSource.subscribe();  
  return () => {  
    subscription.unsubscribe(); // 清理函数  
  };  
}, []); // 空数组表示仅执行一次

useContext：跨组件共享状态

useContext允许组件无需逐层传递props即可访问上下文值，适合全局主题、用户认证等场景。

javascript 复制代码

const ThemeContext = createContext('light');  

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

function Toolbar() {  
  const theme = useContext(ThemeContext);  
  return <div>当前主题: {theme}</div>;  
}

useReducer：复杂状态逻辑管理

当状态逻辑较复杂时，useReducer比useState更合适。它接受一个reducer函数和初始状态，返回当前状态和dispatch方法。

javascript 复制代码

function reducer(state, action) {  
  switch (action.type) {  
    case 'increment':  
      return { count: state.count + 1 };  
    default:  
      throw new Error();  
  }  
}  

function Counter() {  
  const [state, dispatch] = useReducer(reducer, { count: 0 });  
  return (  
    <>  
      Count: {state.count}  
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>  
    </>  
  );  
}

适合处理多字段表单、状态机等场景。

useRef：持久化引用与DOM访问

useRef返回一个可变ref对象，其.current属性可存储任意值，且在组件更新时保持不变。常用于访问DOM节点或保存可变值而不触发重新渲染。

javascript 复制代码

function TextInput() {  
  const inputEl = useRef(null);  
  const focusInput = () => inputEl.current.focus();  

  return (  
    <>  
      <input ref={inputEl}{dAlIaNkUnYu.cOm} type="text" />  
      <button onClick={focusInput}>聚焦输入框</button>  
    </>  
  );  
}

useMemo与useCallback：性能优化利器

useMemo缓存计算结果，避免重复计算；useCallback缓存函数本身，避免子组件不必要的重渲染。

javascript 复制代码

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

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

适用于计算量大的场景或传递给子组件的回调函数。

自定义Hook：封装复用逻辑

自定义Hook是将组件逻辑提取到可重用函数的方式，名称必须以use开头。例如提取窗口大小监听逻辑：

javascript 复制代码

function useWindowSize() {  
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });  
  useEffect(() => {  
    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });  
    window.addEventListener('resize', handleResize);  
    return () => window.removeEventListener('resize', handleResize);  
  }, [HuAcHeNgKq.cOm]);  
  return size;  
}  

// 使用  
function Component() {  
  const { width } = useWindowSize();  
  return <div>窗口宽度: {width}px</div>;  
}

常见问题与最佳实践

避免在条件语句或循环中使用Hooks，必须确保调用顺序一致。对于复杂状态管理，可结合多个Hooks或使用状态管理库。性能优化时优先考虑useMemo和useCallback，但避免过度使用。

通过合理运用这些Hooks，开发者可以大幅提升代码的可读性和维护性，同时充分发挥函数组件的优势。