React hook1：useEffect

在编程中，副作用是指函数或表达式在执行过程中对外部环境产生影响的行为。例如：

修改外部变量（如全局变量、DOM、API 请求、设置定时器等）

什么是纯函数？

// 纯函数：输入相同，输出必定相同，不影响外部
function add(a, b) {return a + b; 
}
//有副作用的函数：影响外部状态
function updateDOM() {document.title = "Changed!"; //副作用：修改DOM
}

React 推崇函数式编程，核心思想是：

组件应该是纯函数（给定相同的props和state，渲染相同的 UI）
副作用应该被隔离，不能直接在渲染过程中执行

React 如何处理副作用？渲染和外部处理相分离。
由于渲染必须是纯的，React 提供了useEffect ，让副作用在渲染完成后执行，而不是在渲染期间执行。

useEffect是 React 提供的副作用隔离机制，让不纯的操作（如API请求、DOM修改）不影响组件的纯渲染逻辑，同时提供清理和优化能力。

保持渲染纯净（在组件渲染到屏幕之后运行）
避免阻塞渲染
自动清理副作用（可以返回一个清理函数，在组件卸载时执行）

react jsx title="useEffect基础用法"
import { useEffect } from 'react';function Example() {useEffect(() => {console.log('组件首次渲染后执行');}, []); // 空依赖数组表示只运行一次return <div>组件内容</div>;
}

react jsx title="useEffect引入依赖项监听变化"
function Example({ id }) {useEffect(() => {console.log('id 变化时执行:', id);}, [id]); // 仅在 id 变化时重新执行return <div>ID: {id}</div>;
}

react jsx title="useEffect清理副作用"
function Example() {useEffect(() => {const timer = setInterval(() => {console.log('定时器运行中...');}, 1000);return () => {clearInterval(timer); // 组件卸载时清理定时器};}, []);return <div>查看控制台</div>;
}

React hook2：useRef

useRef用于直接操作 DOM或存储可变值（不会触发重新渲染）。

用法1：操作DOM

import { useRef } from 'react';function InputFocus() {const inputRef = useRef(null); // 1. 创建 refconst handleClick = () => {inputRef.current.focus(); // 3. 通过 .current 操作 DOM};return (<div>{/* 2. 绑定 ref 到元素 */}<input ref={inputRef} type="text" /><button onClick={handleClick}>聚焦输入框</button></div>);
}

用法2：存储可变值，不触发重新渲染

import { useRef, useState } from 'react';function Counter() {const [count, setCount] = useState(0);const renderCount = useRef(0); // 存储组件渲染次数（不会触发更新）renderCount.current += 1; // 修改值（不会导致重新渲染）return (<div><p>Count: {count}</p><p>组件渲染次数: {renderCount.current}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}

useRef的底层机制

// 近似实现（React 内部简化逻辑）
function useRef(initialValue) {return { current: initialValue }; // 每次都返回同一个对象！
}

存储原理：React 在组件首次渲染时创建这个{ current: … }对象，后续所有渲染都返回同一个对象（引用不变）。
修改current：直接修改current属性不会触发渲染，因为对象本身的引用没变，React 不会检测到变化。

为什么操作 DOM 需要绑定到标签？

<input ref={inputRef} />

React 的隐藏逻辑：当ref属性绑定到 DOM 标签时，React 会在渲染结束后自动将 DOM 节点赋值给inputRef.current。

// React 内部类似这样处理
const domNode = document.createElement('input');
inputRef.current = domNode; // 自动填充 DOM 节点

存储变量为何不需要绑定？

const renderCount = useRef(0);
renderCount.current += 1; // 直接修改即可

存储变量时，current只是一个普通属性，你可以自由读写，React 不会干涉它的值。

关键区别总结

场景	是否需要绑定到标签	current的值来源
操作 DOM	需要	由 React 自动填充为 DOM 节点
存储可变值	不需要	由开发者手动赋值/修改

React hook3：useMemo

useMemo用于缓存计算结果，只有当依赖项变化时才重新计算，避免重复渲染时不必要的计算开销。

function UserList({ users, searchTerm }) {// 缓存过滤后的用户列表，只有当users或searchTerm变化时才重新过滤const filteredUsers = useMemo(() => {return users.filter(user => user.name.toLowerCase().includes(searchTerm.toLowerCase()));}, [users, searchTerm]);return (<ul>{filteredUsers.map(user => (<li key={user.id}>{user.name}</li>))}</ul>);
}

React hook4：useNavigate

**useNavigate 就像一个提供多种导航工具的“工具箱”，可以从中选择需要的功能来完成路由跳转、前进/后退、传递数据等操作。**用“工具箱”类比 useNavigate：

工具箱里的工具	对应 useNavigate 的功能
导航地图	navigate(‘/path’) —— 直接跳转到指定路径。
橡皮擦	navigate(‘/path’, { replace: true }) —— 替换当前路由（擦掉当前记录，不保留历史）。
时间机器按钮	navigate(1) 或 navigate(-1) —— 前进或后退到历史记录中的页面。
快递包裹	navigate(‘/path’, { state: { data } }) —— 跳转时携带隐藏数据（偷偷塞个包裹给下个页面）。

React hook5：useParams()

useParams从当前 URL 路径中提取参数。

示例代码：

<Route path="/user/:id" element={<UserProfile />} />

import { useParams } from 'react-router-dom';function UserProfile() {// 提取 URL 中的动态参数（比如 :id）const params = useParams();console.log(params.id); // 访问 /user/123 时，输出 "123"return <h1>用户ID: {params.id}</h1>;
}