React Hooks 是 React 16.8 版本引入的一种新特性，它允许我们在函数组件中使用 state 和其他 React 特性，而无需编写类组件。React Hooks 提供了一种更简洁、更易于理解的方式来组织和重用代码。本文将详细介绍 React Hooks API 及其应用场景和使用方式。
- useState
useState 是一个用于在函数组件中添加 state 的 Hook。它接受一个初始值作为参数，并返回一个包含两个元素的数组：当前状态值和一个更新状态值的函数。
使用示例：
import React, {
useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数： {
count}</p>
<button onClick={
() => setCount(count + 1)}>+1</button>
<button onClick={
() => setCount(count - 1)}>-1</button>
</div>
);
}
- useEffect
useEffect 是一个用于处理副作用的 Hook，例如数据获取、订阅或手动更改 DOM。它接受两个参数：一个函数（副作用函数）和一个可选的依赖项数组。副作用函数在组件挂载后和依赖项更改时执行。如果省略依赖项数组，则副作用函数将在每次渲染后执行。
使用示例：
import React, {
useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `计数： ${
count}`;
});
return (
<div>
<p>当前计数： {
count}</p>
<button onClick={
() => setCount(count + 1)}>+1</button>
<button onClick={
() => setCount(count - 1)}>-1</button>
</div>
);
}
- useContext
useContext 是一个用于访问 React 上下文的 Hook。它接受一个上下文对象作为参数，并返回该上下文的当前值。
使用示例：
import React, {
useContext } from 'react';
import {
ThemeContext } from './ThemeContext';
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={
{
background: theme.background, color: theme.foreground }}>
我是一个主题按钮
</button>
);
}
- useReducer
useReducer 是一个用于在函数组件中使用 reducer 的 Hook。它接受一个 reducer 函数和一个初始状态作为参数，并返回一个包含当前状态和一个 dispatch 动作的函数的数组。
使用示例：
import React, {
useReducer } from 'react';
function 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 Counter() {
const [state, dispatch] = useReducer(reducer, {
count: 0 });
return (
<div>
<p>当前计数： {
state.count}</p>
<button onClick={
() => dispatch({
type: 'increment' })}>+1</button>
<button onClick={
() => dispatch({
type: 'decrement' })}>-1</button>
</div>
);
}
- useCallback
useCallback 是一个用于缓存函数的 Hook。它接受一个函数和一个依赖项数组作为参数，并返回一个新的记忆化函数。当依赖项更改时，记忆化函数将重新计算。
使用示例：
import React, {
useState, useCallback } from 'react';
function Child({
onClick }) {
console.log('子组件渲染');
return <button onClick={
onClick}>点击我</button>;
}
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>当前计数： {
count}</p>
<Child onClick={
handleClick} />
</div>
);
}
- useMemo
useMemo 是一个用于缓存计算结果的 Hook。它接受一个函数和一个依赖项数组作为参数，并返回一个新的记忆化值。当依赖项更改时，记忆化值将重新计算。
使用示例：
import React, {
useState, useMemo } from 'react';
function expensiveCalculation(number) {
let result = 0;
for (let i = 0; i < number * 100000; i++) {
result += i;
}
return result;
}
function Parent() {
const [count, setCount] = useState(0);
const calculatedValue = useMemo(() => expensiveCalculation(count), [count]);
return (
<div>
<p>计算结果： {
calculatedValue}</p>
<button onClick={
() => setCount(count + 1)}>+1</button>
</div>
);
}
- useRef
useRef 是一个用于访问 DOM 元素的 Hook。它接受一个初始值作为参数，并返回一个可变的 ref 对象。ref 对象的 current 属性指向目标 DOM 元素。
使用示例：
import React, {
useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={
inputEl} type="text" />
<button onClick={
onButtonClick}>聚焦输入框</button>
</div>
);
}
总结：
React Hooks 提供了一种更简洁、更易于理解的方式来组织和重用代码。通过使用不同的 Hook，我们可以在函数组件中实现 state、副作用、上下文、reducer、缓存函数、缓存计算结果和访问 DOM 元素等功能。熟练掌握这些 Hook 将有助于我们编写更高效、更易于维护的 React 应用。
