React Hooks 是 React 16.8 版本引入的一项重大特性，它使得函数组件能够拥有类组件的能力，如状态管理、生命周期等。通过使用 Hooks，开发者可以更高效地编写组件，提高代码的可读性和可维护性。本文将详细介绍 React Hooks 的核心 API，帮助开发者轻松掌握其使用技巧。
一、useState：管理组件状态
useState 是 React Hooks 中最基础的钩子，用于在函数组件中添加状态。
使用方法：
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
注意事项：
useState只能在函数组件的最顶层使用。useState返回一个数组，其中包含当前状态的值和一个更新状态的函数。
二、useEffect：处理副作用
useEffect 用于在函数组件中执行副作用操作，如发送 AJAX 请求、订阅事件等。
使用方法：
import React, { useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 依赖项数组
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
注意事项：
useEffect返回一个清理函数，用于取消副作用。useEffect的依赖项数组中，只有当依赖项发生变化时，副作用才会重新执行。
三、useContext：消费上下文
useContext 用于在函数组件中消费 React 上下文（Context）。
使用方法：
import React, { useContext } from 'react';
import MyContext from './MyContext';
function Example() {
const theme = useContext(MyContext);
return (
<div>
<h1>Theme: {theme}</h1>
</div>
);
}
注意事项：
useContext只能用于消费那些已经通过React.createContext创建的上下文。
四、useReducer：管理复杂状态
useReducer 用于在函数组件中管理复杂的状态。
使用方法：
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
};
function Example() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>You clicked {state.count} times</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
注意事项：
useReducer适用于管理复杂的状态逻辑。useReducer的状态更新函数reducer应该是纯函数。
五、useCallback：缓存回调函数
useCallback 用于缓存回调函数，避免在每次渲染时都创建新的函数。
使用方法：
import React, { useCallback } from 'react';
function Example() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>Increment</button>
</div>
);
}
注意事项：
useCallback的依赖项数组中，只有当依赖项发生变化时，缓存的回调函数才会更新。
六、useMemo：缓存计算结果
useMemo 用于缓存计算结果，避免在每次渲染时都进行重复计算。
使用方法：
import React, { useMemo } from 'react';
function Example() {
const [count, setCount] = useState(0);
const memoizedValue = useMemo(() => computeExpensiveValue(count), [count]);
return (
<div>
<p>You clicked {count} times</p>
<p>Memoized value: {memoizedValue}</p>
</div>
);
}
function computeExpensiveValue(count) {
// 模拟计算过程
for (let i = 0; i < 1000000000; i++) {}
return count;
}
注意事项：
useMemo的依赖项数组中，只有当依赖项发生变化时，缓存的值才会更新。
七、useRef：创建可变的引用对象
useRef 用于创建一个可变的引用对象，其 .current 属性可以被重新赋值。
使用方法：
import React, { useRef } from 'react';
function Example() {
const inputEl = useRef(null);
const focusInput = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={focusInput}>Focus the input</button>
</div>
);
}
注意事项：
useRef返回的引用对象在组件的整个生命周期内保持不变。
八、自定义 Hooks
自定义 Hooks 允许你封装可重用的逻辑，使其可以在多个组件之间共享。
使用方法：
import React, { useState, useEffect } from 'react';
function useCounter(initialCount) {
const [count, setCount] = useState(initialCount);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return [count, setCount];
}
function Example() {
const [count, setCount] = useCounter(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
注意事项：
- 自定义 Hooks 应该以
use开头。 - 自定义 Hooks 可以接受参数，并返回多个值。
总结
React Hooks 为函数组件提供了强大的功能，使得开发者可以更高效地编写组件。通过掌握上述核心 Hooks 的使用技巧，开发者可以轻松应对各种复杂的组件开发场景。