深入理解 React Hooks：从入门到实践
React Hooks 是 React 16.8 引入的新特性，它让我们在函数组件中使用状态和其他 React 特性。本文将深入探讨 Hooks 的原理和最佳实践。
什么是 Hooks
Hooks 是让你可以在不编写 class 的情况下使用 state 和其他 React 特性的函数。最常用的两个 Hooks 是：
useState：让你在函数组件中使用状态useEffect：让你在函数组件中执行副作用操作
useState 详解
javascript
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点击我
</button>
</div>
);
}关键点
- useState 返回一个数组：第一个是状态值，第二个是更新函数
- 初始值只会在首次渲染时使用
- 更新函数不会自动合并对象，需要手动展开
useEffect 详解
javascript
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `点击了 ${count} 次`;
return () => {
// 清理函数
document.title = 'React App';
};
}, [count]); // 只在 count 变化时执行
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点击我
</button>
</div>
);
}自定义 Hooks
自定义 Hooks 让我们可以提取组件逻辑到可重用的函数中：
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);
}, []);
return size;
}最佳实践
- 只在最顶层调用 Hooks，不要在循环、条件或嵌套函数中调用
- 只在 React 函数中调用 Hooks
- 使用 ESLint 插件
eslint-plugin-react-hooks自动检查 - 合理拆分自定义 Hooks，保持单一职责
总结
React Hooks 彻底改变了我们编写 React 组件的方式。它让代码更简洁、逻辑更清晰、复用更容易。如果你还在使用 Class 组件，是时候拥抱 Hooks 了！
标签： #React #JavaScript #前端开发 #Hooks
发布时间： 2026年3月18日
觉得有用就点个赞吧~