React Hooks 教程与案例讲解
本文详细介绍了React Hooks的使用，包括`useState`和`useEffect`，并通过一个简单的案例来展示如何在实际项目中应用这些Hooks。
1. 什么是React Hooks？
React Hooks是React 16.8版本引入的新特性，允许你在不编写类的情况下使用state以及其他的React特性。Hooks为函数组件增加了“钩住”React状态及生命周期等特性的能力。
2. useState Hook
`useState`是一个可以让你在函数组件中添加state的Hook。它返回一个state变量和一个让你更新这个state的函数。
示例代码：
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
你点击了 {count} 次
);
}
3. useEffect Hook
`useEffect`可以让你在函数组件中执行副作用操作（例如数据获取、订阅或者手动修改DOM等）。它可以看作是`componentDidMount`，`componentDidUpdate`和`componentWillUnmount`这三个生命周期方法的组合。
示例代码：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 组件挂载后执行
document.title = `你点击了 ${count} 次`;
return () => {
// 组件卸载前执行
console.log('组件卸载');
};
}, [count]); // 注意这里的依赖数组，只有count变化时才会重新执行
return (
你点击了 {count} 次
);
}
4. 综合案例：计数器应用
下面是一个结合了`useState`和`useEffect`的简单计数器应用。它展示了如何在组件挂载后设置初始状态，并在每次点击按钮时更新状态。
完整代码：
import React, { useState, useEffect } from 'react';
function CounterApp() {
const [count, setCount] = useState(0);
useEffect(() => {
// 组件挂载后设置document标题
document.title = `计数器: ${count}`;
// 清理函数，组件卸载时执行
return () => {
console.log('计数器组件已卸载');
};
}, [count]); // 注意依赖数组
const handleClick = () => {
setCount(count + 1);
};
return (
计数器应用
当前计数: {count}
);
}
export default CounterApp;
5. 总结
React Hooks为函数组件带来了更强大的功能，使得我们不再需要使用类组件来管理state和生命周期。通过本文的介绍和案例讲解，希望你已经掌握了`useState`和`useEffect`的基本用法，并能够在实际项目中灵活运用。
