React中的Hooks主要包括以下几种：
- useState：用于在函数组件中添加状态。通过useState，你可以定义一个状态变量和一个更新该状态的函数。例如，创建一个计数器组件：
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：用于在组件渲染后执行副作用操作，如数据获取、订阅或手动更改DOM。useEffect可以接受一个函数和一个依赖数组作为参数。例如，跟踪点击次数：
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]); // 仅在 count 更改时运行此副作用
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
- useContext：用于访问React上下文中的值。例如，使用全局状态管理库时：
function MyComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
- useReducer：用于处理复杂的状态逻辑。useReducer接受一个reducer函数和一个初始状态，返回当前状态和一个dispatch函数。例如：
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>{state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
</div>
);
}
- useMemo：用于缓存计算结果，避免在每次渲染时重新计算。例如，缓存昂贵的计算结果：
function MyComponent() {
const expensiveValue = useMemo(() => { /* 昂贵的计算 */ }, [dependency]); // 依赖项变化时重新计算
return <div>{expensiveValue}</div>;
}
- useCallback：用于缓存函数，避免在每次渲染时重新创建函数。例如，优化组件性能：
function MyComponent() {
const memoizedCallback = useCallback(() => { /* 函数 */ }, [dependency]); // 依赖项变化时重新创建函数
return <div>{memoizedCallback}</div>; // 使用 memoizedCallback 而不是直接使用函数定义，以避免重新创建函数带来的性能问题。
}
- useRef：用于在组件之间共享引用值，通常用于DOM元素的引用。例如，获取DOM元素的引用：
function MyComponent() {
const refContainer = useRef(initialValue); // 创建一个ref对象并初始化值，通常用于DOM元素的引用。例如：<div ref={refContainer}>Hello</div>。然后可以通过refContainer.current访问DOM元素。
return <div ref={refContainer}>Hello</div>; // 使用refContainer作为ref属性。
}