React 进阶：Hooks 全解

当你刚入门 React，写了一堆 class 组件，还在 constructor 里 this.state = {...}，还在各种生命周期方法之间来回切换，突然发现身边的小伙伴都在说：

“Hooks 太香了！再也不写 Class 了！”

这时候你可能一脸懵：Hooks 到底是啥？为啥大家都在用？

今天这篇文章，就带你一口气看懂 React Hooks。

什么是 Hooks？

Hooks 是 React 16.8 引入的新特性，让你在 函数组件 中使用 state 和生命周期功能。

一句话：Hooks = React 给函数组件开的小灶。

它的好处：

不用写 class，函数式更轻量；
逻辑更清晰，代码更简洁；
复用状态逻辑更优雅。

常用 Hooks 全家桶

useState —— 给函数组件加上“记忆”

jsx

import { useState } from "react";function Counter() {  const [count, setCount] = useState(0);  return (    <div>      <p>点击次数: {count}</p>      <button onClick={() => setCount(count + 1)}>点我</button>    </div>  );}

理解方式：useState = “拿一个盒子存数据”，盒子里东西变了，界面就会更新。

useEffect —— 副作用管理大师

“副作用”指的是除了渲染之外的操作，比如：请求数据、操作 DOM、监听事件等。

jsx

import { useState, useEffect } from "react";function User() {  const [user, setUser] = useState(null);  useEffect(() => {    fetch("/api/user/1")      .then(res => res.json())      .then(data => setUser(data));  }, []); // [] 表示只在首次渲染时运行  return <div>{user ? user.name : "加载中..."}</div>;}

⚠️ 小技巧：

不写依赖数组 [] → 每次渲染都会执行
写 [] → 只执行一次（挂载时）
写 [变量] → 当变量变化时才执行

useContext —— 跨层级传值神器

避免“props 一层层传递”的尴尬。

jsx

const ThemeContext = React.createContext("light");function App() {  return (    <ThemeContext.Provider value="dark">      <Toolbar />    </ThemeContext.Provider>  );}function Toolbar() {  const theme = React.useContext(ThemeContext);  return <p>当前主题: {theme}</p>;}

useRef —— 获取 DOM 或保存一个不会变的值

jsx

function InputFocus() {  const inputRef = React.useRef(null);  return (    <div>      <input ref={inputRef} />      <button onClick={() => inputRef.current.focus()}>聚焦</button>    </div>  );}

除了 DOM，useRef 还常用来存储不会触发刷新但需要记住的值。

useMemo —— 缓存计算结果

防止每次渲染都做重复计算。

jsx

function Expensive({ num }) {  const result = React.useMemo(() => {    console.log("计算中...");    return num * 2;  }, [num]);  return <p>{result}</p>;}

useCallback —— 缓存函数

配合子组件避免不必要的重复渲染。

jsx

const Child = React.memo(({ onClick }) => {  console.log("子组件渲染");  return <button onClick={onClick}>点我</button>;});function Parent() {  const [count, setCount] = useState(0);  const handleClick = React.useCallback(() => {    console.log("clicked");  }, []);  return (    <>      <p>{count}</p>      <Child onClick={handleClick} />      <button onClick={() => setCount(count + 1)}>+1</button>    </>  );}

自定义 Hook —— 逻辑复用神器

当你发现多个组件里有相同的逻辑，可以抽出来写成 自定义 Hook。

jsx

function useWindowWidth() {  const [width, setWidth] = useState(window.innerWidth);  useEffect(() => {    const handleResize = () => setWidth(window.innerWidth);    window.addEventListener("resize", handleResize);    return () => window.removeEventListener("resize", handleResize);  }, []);  return width;}function MyComponent() {  const width = useWindowWidth();  return <p>窗口宽度: {width}px</p>;}

Hooks 的使用规则

React 官方给了两条铁律：

只在函数最外层调用 Hooks，不要放在循环、条件语句里。
只在函数组件或自定义 Hook 中调用 Hooks。

👉 为什么？因为 React 要保证调用顺序一致，否则会“晕”。

总结

Hooks 的核心目标就是：让函数组件更强大，更好写。

useState 管状态
useEffect 管副作用
useContext 管跨层传值
useRef 管 DOM 和持久值
useMemo / useCallback 管性能优化
自定义 Hook 管逻辑复用

掌握这些，你就能告别 class 组件，写出又简洁又优雅的 React 应用。

评论区0