React Hooks 是 React 16.8 引入的新特性，它让我们可以在函数组件中使用状态和其他 React 特性。本文将详细介绍常用 Hooks 的使用方法。

useState - 状态管理

useState 是最基本的 Hook，它让我们在函数组件中添加状态：

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

useEffect - 副作用处理

useEffect 用于处理副作用，如数据获取、订阅、手动修改 DOM 等。它相当于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

useEffect(() => {
	document.title = `点击次数: ${count}`;
	return () => {
		console.log('组件卸载');
	};
}, [count]);

useContext - 跨层级通信

useContext 让组件可以访问 Context 的值，无需通过多层 props 传递。

自定义 Hooks

我们可以创建自定义 Hook 来复用逻辑。自定义 Hook 以 use 开头，内部可以使用其他 Hooks。

function useWindowSize() {
	const [size, setSize] = useState({
		width: window.innerWidth,
		height: window.innerHeight
	});
	// ... 逻辑代码
	return size;
}

掌握这些基础 Hooks 后，你就可以很好地使用 React 进行开发了。更多高级用法，如 useReducer、useMemo、useCallback 等，我们以后再深入探讨。