React Hooks 是一种革命性的新特性，它允许你在不编写类组件的情况下使用状态和其他 React 特性。这使得函数组件变得更加强大，代码也更加简洁和模块化。以下是一些常用的 React Hooks，以及它们的基本用法和示例。
useState：在函数组件中添加状态
useState Hook 允许你在函数组件中添加局部状态。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect：执行副作用操作
useEffect Hook 允许你在函数组件中执行副作用操作，类似于类组件的生命周期方法。
import React, { useEffect } from 'react';
function LifecycleDemo() {
useEffect(() => {
console.log('Component is mounted');
return () => {
console.log('Component will unmount');
};
}, []); // 空依赖数组确保只在挂载和卸载时运行
return <div>Lifecycle Demo</div>;
}
useContext：在组件树中传递数据
useContext Hook 允许你在组件树中传递数据，无需通过每一层手动传递 props。
import React, { useContext, createContext } from 'react';
const MyContext = createContext();
function Parent() {
return (
<MyContext.Provider value="Hello from parent">
<Child />
</MyContext.Provider>
);
}
function Child() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
function App() {
return <Parent />;
}
useReducer：管理复杂的状态逻辑
useReducer Hook 允许你使用一个 reducer 函数来管理复杂的状态逻辑。
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>You clicked {state.count} times</p>
<button onClick={() => dispatch({ type: 'increment' })}>
Increment
</button>
<button onClick={() => dispatch({ type: 'decrement' })}>
Decrement
</button>
</div>
);
}
useRef：访问 DOM 节点或 React 元素的引用
useRef Hook 允许你访问 DOM 节点或一个 React 元素的引用。
import React, { useRef } from 'react';
function Input() {
const inputRef = useRef();
React.useEffect(() => {
console.log(inputRef.current.value);
}, []);
return (
<input ref={inputRef} />
);
}
useMemo：记住高阶函数或计算值
useMemo Hook 允许你记住高阶函数或计算值，仅在依赖项改变时重新计算。
import React, { useMemo } from 'react';
function computeExpensiveValue(a, b) {
// 计算逻辑
return a + b;
}
function Parent() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return (
<div>
<p>The computed value is: {expensiveValue}</p>
<button onClick={() => setA(a + 1)}>Increment A</button>
<button onClick={() => setB(b + 1)}>Increment B</button>
</div>
);
}
useCallback：记住函数
useCallback Hook 允许你记住函数，仅在依赖项改变时重新创建。
import React, { useCallback, useState } from 'react';
function Parent() {
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>
);
}
useImperativeHandle 和 forwardRef：暴露 DOM 节点或实例的方法
useImperativeHandle 和 forwardRef Hooks 允许你在使用 forwardRef 时，暴露给父组件的 DOM 节点或实例的方法。
import React, { useImperativeHandle, forwardRef } from 'react';
const FancyButton = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
clickButton() {
alert('Clicked!');
}
}));
return (
<button className="FancyButton">
{props.children}
</button>
);
});
function Parent() {
const buttonRef = useRef();
React.useImperativeHandle(buttonRef, () => ({
clickButton() {
alert('Clicked!');
}
}));
return (
<div>
<FancyButton ref={buttonRef}>Click me</FancyButton>
<button onClick={() => buttonRef.current.clickButton()}>
Click me via ref
</button>
</div>
);
}
useDebugValue：在 React DevTools 中显示自定义 hook 的标签
useDebugValue Hook 用于在 React DevTools 中显示自定义 hook 的标签。
import React, { useDebugValue } from 'react';
function useCustomHook(value) {
useDebugValue(value);
// Hook 逻辑
}
function Parent() {
useCustomHook('Hello, World!');
return <div>Parent Component</div>;
}
通过这些示例，你可以看到 React Hooks 提供了一种强大且灵活的方式来编写组件逻辑。它们使得代码更加模块化和可重用，同时也简化了组件的生命周期管理。希望这篇指南能帮助你更好地理解和使用 React Hooks。
