React Hooks基础：从useState到useContext核心API详解

可以这么理解，React Hooks 就是 2018 年 React 16.8 引入的革命性特性，它让咱们能在函数组件里直接用状态和其他 React 特性，再也不用写那些绕来绕去的 class 组件了。现在最新的稳定版是 React 18.2.0（2022年6月发布的），这个版本里的 Hooks 已经非常成熟稳定，咱们平时开发基本都是基于这个版本。

useState：最基础的状态管理

useState 应该是咱们用得最多的 Hook 了，它用来声明组件的局部状态。很多新手刚接触的时候容易实战经验，比如直接修改状态值。关键点：永远不要直接修改 state，一定要用 setState 函数。

看个最基础的计数器例子：

这里有个细节要注意，setCount 可以传一个新值，也可以传一个函数，这个函数会接收之前的状态值作为参数。当你新的状态依赖之前的状态时，比如这里的减 1，用函数形式更稳妥，因为 React 的状态更新可能是异步的，直接用 count - 1 有时候拿到的不是最新值。

useReducer：复杂状态逻辑救星

当状态逻辑比较复杂，比如有多个字段，或者下一个状态依赖之前多个状态的时候，useReducer 就派上用场了。换个角度看，它和 useState 类似，但更适合处理复杂的状态更新逻辑，尤其是像表单处理这种场景。

咱们用它实现一个简单的多字段表单：

这里 useReducer 接收一个 reducer 函数和初始状态，返回当前状态和 dispatch 函数。通过 dispatch 不同的 action 来更新状态，逻辑非常清晰，比用多个 useState 管理表单字段要舒服多了。

useEffect：副作用处理专家

组件里除了渲染 UI，经常需要做些其他事情，比如数据请求、订阅事件、操作 DOM 这些，这些就是副作用。useEffect 就是专门处理这些的。

它的第二个参数是依赖数组，这个特别重要，很多新手在这里实际案例：

• 依赖数组为空 []：副作用只在组件挂载时执行一次，相当于 class 组件的 componentDidMount
• 依赖数组有值 [dep1, dep2]：只有当依赖的值变化时，副作用才会重新执行
• 省略依赖数组：每次组件渲染都会执行副作用，这个一定要避免，不然很容易造成无限循环

看个数据请求的例子：

值得留意的是，useEffect 里的清理函数很重要，比如你设置了定时器，一定要在清理函数里清除，不然组件卸载了定时器还在跑，那就是内存泄漏了。

useContext：跨组件状态共享

平时我们传值都是 props 一层层往下传，要是组件层级深了，那就很麻烦，这就是所谓的“props 钻透”。useContext 就是解决这个问题，让我们可以跨组件共享状态，不用一层层传 props。

先创建一个 Context：

这里 ThemeProvider 里的组件都能通过 useContext 获取主题状态，不管层级多深，不用一层层传 props。不过要注意，useContext 会导致组件在 Context 值变化时重新渲染，所以如果 Context 里的值变化频繁，最好拆分成多个 Context。

💡 经验总结

useState 和 useReducer 怎么选？ 简单状态用 useState，比如单个值、简单的对象；复杂状态逻辑，比如多个字段联动、状态更新逻辑复杂，就用 useReducer，维护起来更清晰。如果是 React 18.2.0 及以后版本，还可以结合 useMemo 优化 reducer 相关的计算，后面性能优化章节会详细讲。

React 19新特性实战：use()与useEffectEvent尝鲜指南

现在 React 19 Beta 已经在 2024年4月发布了，里面有不少让人眼前一亮的新 Hooks 特性，虽然还是 Beta 版，但咱们可以提前尝尝鲜，看看未来 React 的发展方向。可以这么理解，这些新特性就是为了让咱们写代码更简单，少写点模板代码。

use() hook：直接读取 Promise 和 Context

React 19 里最火的新 Hook 就是 use() 了，它能让咱们在组件里直接读取 Promise 或者 Context 的值。之前咱们读 Context 要用 useContext，请求数据要在 useEffect 里处理，现在用 use() 可能更方便。不过社区里现在有个争议，就是 use() 可以在条件判断里用，打破了之前 Hooks“只能在顶层调用”的规则，这个咱们后面会聊。

先看看用 use() 读取 Context 的例子，对比下之前的 useContext：

再看看用 use() 处理 Promise 的例子，这个更实用，之前咱们请求数据要在 useEffect 里写一堆 try/catch、loading、error 状态，现在用 use() 配合 Suspense 就能简化：

简单来说，use() 读取 Promise 的时候，组件会暂停渲染，直到 Promise resolve，这个暂停会被最近的 Suspense 组件捕获，显示 fallback 内容。这样就不用咱们手动管理 loading 状态了，代码简洁很多。不过要注意，use() 读取的 Promise 最好是稳定的，不然每次渲染都创建新的 Promise，会一直触发重新请求。

useEffectEvent：分离副作用中的事件逻辑

之前我们写 useEffect 的时候，经常会在副作用里用到一些函数，这些函数如果依赖外部状态，就得加到依赖数组里，不然会有过期闭包的问题。但有时候这些函数其实就是个事件处理逻辑，和渲染无关，加依赖数组里挺麻烦的。React 19 里的 useEffectEvent 就是解决这个问题的，它能把副作用里的事件逻辑分离出来，这些事件函数不用加到 useEffect 的依赖数组里。

看个例子，比如我们想在窗口 resize 的时候打印当前的计数：

值得留意的是，useEffectEvent 定义的函数，在 useEffect 里调用的时候，不用加到依赖数组里，而且它能访问到最新的 props 和 state，不会有过期闭包的问题。这个特性如果稳定下来，能解决很多 useEffect 依赖数组的痛点。不过现在还是 React 19 Beta 的特性，生产环境暂时别用，等稳定版出来再考虑。

新特性带来的思考与争议

现在社区里对 use() hook 争议挺大的，之前 React 官方一直强调 Hooks 必须在组件顶层调用，不能在条件、循环里用，现在 use() 打破了这个规则，很多人担心会让代码逻辑变混乱，不好维护。比如你在条件里用 use()，条件不满足的时候就不执行，那组件的行为就不好预测了。

还有服务端组件（RSC）和 Hooks 的融合，React 19 里服务端组件可以先用 use() 获取数据，然后把数据传给客户端组件，客户端组件再用 useState 这些 Hooks 处理交互，这样能减少客户端的 bundle 体积，这个趋势挺明显的。比如一个博客文章页面，服务端组件用 use() 获取文章内容，然后传给客户端的评论组件，评论组件用 useState 管理评论输入，这样文章内容不用打包到客户端里。

📌 要点提醒

现在要不要用 React 19 Beta 的新特性？ 个人建议，学习可以，但生产项目暂时别用，毕竟还是 Beta 版，API 可能会变。如果实在想尝鲜，可以建个小 demo 试试，看看 use() 和 useEffectEvent 怎么用，了解未来的发展方向。等 React 19 稳定版出来，这些特性落地了，再考虑在项目里用。另外，TypeScript 对 React 19 新 Hooks 的类型推断也在完善，现在用可能会遇到类型报错的问题，这个要注意。

自定义Hooks设计模式：封装useFetch与useLocalStorage

写了这么多基础 Hooks，咱们肯定不想每次都重复写那些逻辑，比如每次请求数据都要写 useState 管理 loading、error、data，每次用 localStorage 都要写读取、写入、监听变化的逻辑。这时候自定义 Hooks 就派上用场了，打个比方，把可复用的逻辑封装成一个函数，名字以 use 开头，里面可以调用其他 Hooks，这样在任何组件里都能直接用。

自定义Hooks的基本规则

首先得记住，自定义 Hooks 本质上就是个 JavaScript 函数，但有两个规则：

• 名字必须以 use 开头，比如 useFetch、useLocalStorage，这样 React 才能识别它是个 Hook
• 里面可以调用其他 Hooks（useState、useEffect 这些），但也要遵守 Hooks 的规则，不能在条件、循环里调用 Hooks

封装useLocalStorage：持久化状态

咱们先封装一个 useLocalStorage，作用就是像 useState 一样用状态，但这个状态会自动同步到 localStorage，页面刷新也不会丢。这个在存用户偏好设置、登录 token 这些场景特别有用。

这个 useLocalStorage 做了几件事：初始化的时候从 localStorage 读值，状态变化的时候同步到 localStorage，还监听了 storage 事件，这样其他标签页修改了同一个 key，当前组件也能同步更新。核心要点：读取 localStorage 的时候要做 try/catch，因为有些浏览器禁用了 localStorage，或者存储的值不是合法的 JSON，会报错。

封装useFetch：简化数据请求

接下来封装一个 useFetch，把请求数据时的 loading、error、data 状态都封装进去，以后任何组件要请求数据，直接调用这个 Hook 就行，不用重复写那些逻辑。如果是在 React 18.2.0 项目里，还可以结合第三方 Hooks 比如 useSWR 或者 useQuery，但咱们先自己实现一个基础的版本，理解原理。

这里 useFetch 接收 url 和 options 作为参数，返回 data、loading、error 三个状态。依赖数组里用了 JSON.stringify(options)，因为 options 是个对象，直接放依赖数组里，每次渲染对象引用变化，都会触发重新请求，所以序列化一下比较稳妥。当然，更好的做法是让调用 useFetch 的地方用 useMemo 包裹 options，避免不必要的重新请求。

自定义Hooks的最佳实践

现在社区里经常讨论“Hooks 地狱”的问题，就是有人把逻辑拆得太细，一个组件里调用十几个自定义 Hooks，看起来很乱。注意，自定义 Hooks 要适度拆分，一个 Hook 只做一件事，但也不要拆得太碎。比如 useFetch 就只做数据请求相关的逻辑，不用把数据处理的逻辑也加进去，数据处理可以让调用它的组件自己做，或者再封装一个专门处理数据的 Hook。

还有，自定义 Hooks 里也可以调用其他自定义 Hooks，比如我们可以封装一个 useUser，里面调用 useFetch 和 useLocalStorage：

这样在组件里直接用 useUser 就能拿到用户信息和登录状态，非常方便。

📌 要点提醒

自定义 Hooks 要不要处理所有边界情况？ 不用，看场景。如果是自己项目用的，处理常见的边界情况就行，比如 useLocalStorage 处理 JSON 解析失败、useFetch 处理网络错误。如果是要开源给别人用的，就得处理更多边界情况，比如 useFetch 支持取消请求、支持不同的响应类型（不是只支持 JSON）、支持请求重试这些。另外，自定义 Hooks 最好加上 TypeScript 类型，比如 useLocalStorage 可以加泛型，指定存储的值的类型，这样用起来更友好，React 19 之后 TypeScript 对 Hooks 的类型推断也会更精准，这个可以期待下。

性能优化进阶：useMemo、useCallback与useTransition避坑

写 React 组件的时候，经常会遇到性能问题，比如父组件状态变了，子组件明明没用到这个状态，也跟着重新渲染了；或者一个计算很耗时的函数，每次渲染都执行，导致页面卡顿。这时候就需要性能优化相关的 Hooks 了：useMemo 缓存计算结果、useCallback 缓存函数、useTransition 标记非紧急更新。换个角度看，这些 Hooks 就是帮我们减少不必要的计算和渲染，让页面更流畅。

useMemo：缓存计算结果

useMemo 的作用是缓存一个计算的结果，只有当依赖的值变化的时候，才会重新计算，否则直接返回之前缓存的结果。它接收两个参数：一个是计算函数，一个是依赖数组，和 useEffect 类似。

看个例子，比如我们有一个耗时的计算，比如过滤一个很长的列表：

这里如果没有 useMemo，每次点击“增加计数”按钮，组件重新渲染，过滤列表的逻辑都会执行一遍，即使 filter 没变，控制台也会打印“过滤列表”。用了 useMemo 之后，只有 filter 变化的时候才会重新过滤，点击计数按钮的时候不会，性能提升明显。核心要点：useMemo 不是必须的，只有当计算很耗时，或者依赖的组件重新渲染频繁的时候才用，不然反而会增加内存开销，因为要缓存结果。

useCallback：缓存函数

useCallback 和 useMemo 类似，不过它缓存的是函数，而不是计算结果。为什么需要缓存函数呢？因为函数组件每次渲染都会创建一个新的函数，如果你把这个新函数作为 props 传给子组件，子组件用 React.memo 包裹的话，每次都会认为 props 变了，触发重新渲染。这时候用 useCallback 缓存函数，只要依赖不变，函数引用就不变，子组件就不会重新渲染。

看个例子，父组件传一个函数给子组件：

这里 ChildButton 用 memo 包裹了，所以如果传的 onClick 函数引用不变，就不会重新渲染。如果不用 useCallback，每次父组件渲染，handleClick 都是新的函数，子组件每次都会渲染，控制台会打印“子组件渲染”。用了 useCallback 之后，点击“增加计数”按钮，父组件渲染，但 handleClick 引用不变，第一个子组件不会渲染；而 handleTextClick 依赖 text，输入文本的时候 text 变化，handleTextClick 才会创建新函数，第二个子组件才会渲染。

useTransition：标记非紧急更新

useTransition 是 React 18 引入的新 Hook，用来标记一些非紧急的状态更新，让这些更新不会阻塞紧急的更新（比如用户输入、点击）。其实，就是把更新分成两类：紧急的（用户交互）和非紧急的（比如列表过滤、搜索结果更新），非紧急的更新可以稍后再做，这样页面就不会卡顿。

它返回一个数组，第一个值是一个布尔值 isPending，表示非紧急更新是否正在进行；第二个值是一个函数 startTransition，用来包裹非紧急的更新。

看个例子，比如一个搜索框，输入的时候过滤一个大列表：

function Counter() {

if (Math.random() > 0.5) {

const [count, setCount] = useState(0); // 危险操作！

}

const [name, setName] = useState('张三');

return

}

import React, { useState } from 'react';

function UserProfile({ isAdmin }) {

// ❌ 错误：在条件语句中调用 useState

if (isAdmin) {

const [adminLevel, setAdminLevel] = useState(1);

}

const [userName, setUserName] = useState('Guest');

return (

);

}

import React, { useState } from 'react';

function UserProfile({ isAdmin }) {

// ✅ 正确：Hook在顶层调用

const [adminLevel, setAdminLevel] = useState(1);

const [userName, setUserName] = useState('Guest');

return (

);

}

{

"plugins": ["react-hooks"],

"rules": {

"react-hooks/rules-of-hooks": "error",

"react-hooks/exhaustive-deps": "warn"

}

}

import React, { useState, useMemo } from 'react';

function ExpensiveList({ items, filterText }) {

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

// 必须手动使用 useMemo，还得小心写对依赖数组 [items, filterText]

const filteredItems = useMemo(() => {

console.log('过滤数据...');

return items.filter(item => item.name.includes(filterText));

}, [items, filterText]);

return (

);

}

// 假设 React Compiler 已经启用

import React, { useState } from 'react';

function ExpensiveList({ items, filterText }) {

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

// 不需要写 useMemo！编译器会自动识别这里的逻辑是否昂贵，并决定是否注入缓存

const filteredItems = items.filter(item => item.name.includes(filterText));

return (

);

}

import React, { createContext, useContext, useReducer, useCallback } from 'react';

// 1. 定义 Context

const AuthContext = createContext(null);

// 2. 定义 Reducer

const authReducer = (state, action) => {

switch (action.type) {

case 'LOGIN':

return { ...state, user: action.payload, isLoggedIn: true };

case 'LOGOUT':

return { ...state, user: null, isLoggedIn: false };

default:

return state;

}

};

// 3. 定义 Provider 组件

export const AuthProvider = ({ children }) => {

const [state, dispatch] = useReducer(authReducer, { user: null, isLoggedIn: false });

// 用 useCallback 缓存 action，防止不必要的渲染

const login = useCallback((userData) => {

dispatch({ type: 'LOGIN', payload: userData });

}, []);

const logout = useCallback(() => {

dispatch({ type: 'LOGOUT' });

}, []);

return (

{children}

);

};

// 4. 自定义 Hook 方便使用

export const useAuth = () => {

const context = useContext(AuthContext);

if (!context) {

throw new Error('useAuth 必须在 AuthProvider 内使用');

}

return context;

};

// 5. 使用组件

const UserStatus = () => {

const { state, login, logout } = useAuth();

if (!state.isLoggedIn) {

return login({ name: '李四' })}>登录;

}

return (

);

};

// 在 App 里包裹

//