React Hooks 是 React 16.8 版本引入的一个重大特性，它允许在不编写类组件的情况下使用状态和生命周期方法。Hooks 的引入显著简化了React组件的编写，提高了代码的可读性和可维护性。
`useState` 是React Hooks中最基础的钩子，用于在函数组件中添加状态管理。在类组件中，我们需要使用`this.state`和`this.setState`来处理状态，但在函数组件中，我们可以使用`useState`。例如：
```jsx
import React, { useState } from 'react';
function Counter() {
// 声明状态
const [count, setCount] = useState(0);
// 更新状态
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>click me</button>
</div>
);
}
```
在这里，`useState`接受一个初始值（这里是0），并返回一个数组，其中第一个元素是状态变量（`count`），第二个元素是更新状态的方法（`setCount`）。
`useEffect` 是React Hooks中的另一个关键钩子，它用于模拟生命周期方法，如`componentDidMount`, `componentDidUpdate` 和 `componentWillUnmount`。`useEffect`接收两个参数：一个函数（执行副作用的函数）和一个依赖数组。例如：
```jsx
import React, { useEffect } from 'react';
function Example() {
useEffect(() => {
console.log('首次渲染与更新');
// 卸载时执行清理操作
return () => {
console.log('首次卸载');
};
}, []); // 空数组表示只在组件挂载时执行一次，类似 componentDidMount
useEffect(() => {
console.log('首次渲染与更新');
// 卸载时移除监听器
return () => {
console.log('首次卸载');
window.removeEventListener('resize', onResize);
};
}, [num]); // num变化时重新执行，类似 componentDidUpdate
}
```
`useRef` 用于创建一个可变的引用对象，它的 `.current` 属性可以在组件的整个生命周期内保持不变。这在处理DOM元素引用或保存一些值时非常有用，例如：
```jsx
import React, { useRef } from 'react';
function TextInput() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<div>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</div>
);
}
```
自定义Hooks 是可以复用的Hooks，它们遵循同样的规则，但可以根据特定需求进行定制。例如，我们可以创建一个名为`useWinSize`的自定义Hook，用于监听窗口大小变化：
```jsx
import { useState, useEffect } from 'react';
function useWinSize() {
const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
useEffect(() => {
function handleResize() {
setSize({ width: window.innerWidth, height: window.innerHeight });
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
// 在其他组件中使用
function MyComponent() {
const { width, height } = useWinSize();
return <div>The window is {width}px wide and {height}px high.</div>;
}
```
React Hooks 提供了一种更加简洁、模块化的方式来处理状态和副作用，使得函数组件能够拥有类组件的所有能力，同时也简化了代码结构，提高了代码复用性。通过`useState`, `useEffect`, `useRef`以及自定义Hooks，开发者可以更轻松地管理React应用中的复杂逻辑。
