当前位置：首页 > news >正文

React Hooks 完全指南：从基础到高级的实战技巧

news 2025/8/28 10:01:59

概述

React Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性。根据数据的使用场景和更新机制，可以将 Hooks 分为三大类：

1. 保存只读数据

useMemo

用途： 缓存计算结果，避免重复计算

语法：

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

特点：

只有当依赖项发生变化时才重新计算
适用于计算量大的操作
返回缓存的值

使用场景：

// 复杂计算
const expensiveValue = useMemo(() => {return items.filter((item) => item.price > 100).map((item) => ({...item,discount: item.price * 0.1,}));
}, [items]);// 对象/数组缓存
const memoizedObject = useMemo(() => ({id: user.id,name: user.name,avatar: user.avatar,}),

[user.id, user.name, user.avatar]

);

useCallback

用途： 缓存函数，避免子组件不必要的重新渲染

语法：

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

特点：

只有当依赖项变化时才创建新的函数
主要用于性能优化
返回缓存的函数引用

使用场景：

// 传递给子组件的回调函数
const handleClick = useCallback((id) => {setSelectedId(id);fetchUserDetails(id);
}, []);// 事件处理函数
const handleSubmit = useCallback((formData) => {submitForm(formData);},[submitForm]
);// 子组件优化
const ChildComponent = React.memo(({ onUpdate }) => {return <button onClick={onUpdate}>更新</button>;
});

2. 保存可变数据，更改时触发渲染

useState

用途： 管理组件内的简单状态

语法：

const [state, setState] = useState(initialState);

特点：

状态更新会触发组件重新渲染
异步更新，多个 setState 会被批处理
适合简单的状态管理

使用场景：

// 基础状态管理
const [count, setCount] = useState(0);
const [name, setName] = useState("");
const [isLoading, setIsLoading] = useState(false);// 对象状态
const [user, setUser] = useState({name: "",email: "",age: 0,
});// 函数式更新
setCount((prevCount) => prevCount + 1);
setUser((prevUser) => ({...prevUser,name: "新名字",
}));

useReducer

用途： 管理复杂的状态逻辑

语法：

const [state, dispatch] = useReducer(reducer, initialState, init);

特点：

状态更新逻辑集中管理
适合复杂的状态转换
可以处理多个相关的状态

使用场景：

// 定义 reducer
const todoReducer = (state, action) => {switch (action.type) {case "ADD_TODO":return {...state,todos: [...state.todos, action.payload],};case "TOGGLE_TODO":return {...state,todos: state.todos.map((todo) =>todo.id === action.payload? { ...todo, completed: !todo.completed }: todo),};case "DELETE_TODO":return {...state,todos: state.todos.filter((todo) => todo.id !== action.payload),};default:return state;}
};// 使用 useReducer
const [state, dispatch] = useReducer(todoReducer, {todos: [],filter: "all",
});// 分发 action
dispatch({ type: "ADD_TODO", payload: { id: 1, text: "学习 React" } });
dispatch({ type: "TOGGLE_TODO", payload: 1 });

3. 保存可变数据，更改时不触发渲染

useRef

用途： 保存可变值，不触发重新渲染

语法：

const refContainer = useRef(initialValue);

特点：

值的变化不会触发组件重新渲染
可以访问 DOM 元素
适合存储不需要触发渲染的数据

使用场景：

// 访问 DOM 元素
const inputRef = useRef(null);
const focusInput = () => {inputRef.current.focus();
};// 存储定时器 ID
const timerRef = useRef(null);
useEffect(() => {timerRef.current = setInterval(() => {console.log("定时器执行");}, 1000);return () => {if (timerRef.current) {clearInterval(timerRef.current);}};
}, []);// 存储前一次的值
const prevCountRef = useRef();
useEffect(() => {prevCountRef.current = count;
});// 存储实例变量
const instanceRef = useRef({isMounted: false,data: null,
});

最佳实践

性能优化

// 1. 合理使用 useMemo 和 useCallback
const expensiveValue = useMemo(() => {return heavyComputation(data);
}, [data]);const handleClick = useCallback(() => {// 处理点击事件
}, [dependencies]);// 2. 避免在渲染中创建对象/函数
// ❌ 错误做法
const Component = () => {const [count, setCount] = useState(0);// 每次渲染都会创建新对象const style = { color: "red" };const handleClick = () => setCount(count + 1);return (<div style={style} onClick={handleClick}>{count}</div>);
};// ✅ 正确做法
const Component = () => {const [count, setCount] = useState(0);const style = useMemo(() => ({ color: "red" }), []);const handleClick = useCallback(() => setCount((prev) => prev + 1), []);return (<div style={style} onClick={handleClick}>{count}</div>);
};

状态管理选择

// 简单状态 - 使用 useState
const [isVisible, setIsVisible] = useState(false);
const [userName, setUserName] = useState("");// 复杂状态 - 使用 useReducer
const [formState, dispatch] = useReducer(formReducer, {fields: {},errors: {},isValid: false,
});// 不需要渲染的数据 - 使用 useRef
const previousValue = useRef(null);
const timeoutId = useRef(null);

依赖项管理

// 1. 正确设置依赖项
useEffect(() => {fetchData(userId);
}, [userId]); // 包含所有依赖项// 2. 使用 useCallback 避免依赖项变化
const fetchData = useCallback((id) => {// 获取数据逻辑
}, []); // 空依赖数组// 3. 使用 useRef 存储最新值
const latestValue = useRef(value);
useEffect(() => {latestValue.current = value;
});useEffect(() => {const timer = setInterval(() => {console.log(latestValue.current); // 总是获取最新值}, 1000);return () => clearInterval(timer);
}, []); // 不需要依赖 value

常见陷阱

1. 过度优化

// ❌ 不必要的 useMemo
const simpleValue = useMemo(() => count + 1, [count]);// ✅ 直接计算
const simpleValue = count + 1;

2. 依赖项遗漏

// ❌ 遗漏依赖项
useEffect(() => {console.log(count);
}, []); // 缺少 count 依赖// ✅ 正确设置依赖项
useEffect(() => {console.log(count);
}, [count]);

3. 闭包陷阱

// ❌ 闭包陷阱
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {console.log(count); // 总是打印初始值
}, []); // 空依赖数组// ✅ 解决方案 1: 添加依赖项
const handleClick = useCallback(() => {console.log(count);
}, [count]);// ✅ 解决方案 2: 使用函数式更新
const handleClick = useCallback(() => {setCount((prevCount) => {console.log(prevCount);return prevCount + 1;});
}, []);