useState:
- 用于在函数组件中添加状态。
- 示例：
import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}
useEffect:
- 用于在函数组件中执行副作用操作，如数据获取、订阅等。
- 示例：
import React, { useState, useEffect } from 'react';function ComponentWithEffect() {useEffect(() => {// 执行一些副作用操作return () => {// 在组件卸载时清除副作用// 例如取消订阅、清除定时器等};}, []); // 依赖为空数组，表示只在组件挂载时执行一次，依赖项有值，依赖项有变化则触发return <p>Component with effect</p>;
}
useMemo:
- 用于在渲染过程中对计算昂贵的值进行记忆化，以提高性能。
- 示例：
import React, { useMemo } from 'react';function MemoizedComponent({ a, b }) {const result = useMemo(() => {// 执行一些计算return a + b;}, [a, b]); // 依赖数组，只有当 a 或 b 改变时才重新计算return <p>Result: {result}</p>;
}
useRef:
- 创建一个可变的 ref 对象，用于保存组件中的可变值。
- 示例：
import React, { useRef } from 'react';function TextInputWithFocusButton() {const inputEl = useRef(null);const focusInput = () => {inputEl.current.focus();};return (<div><input ref={inputEl} type="text" /><button onClick={focusInput}>Focus the input</button></div>);
}
useCallback:
- 用于在组件重新渲染时，缓存回调函数。
- 示例：
import React, { useState, useCallback } from 'react';function Counter() {const [count, setCount] = useState(0);const increment = useCallback(() => {setCount(prevCount => prevCount + 1);}, []);return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
}
