react 内置hooks 详细使用场景，使用案例

useState

场景：组件中管理局部状态，如表单值、开关、计数器等。

复制代码

const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Click {count}</button>;

useEffect

场景：

组件挂载时执行副作用（如请求数据、事件绑定）
依赖变化时触发逻辑
卸载清理操作

useEffect(() => {
const id = setInterval(() => console.log('tick'), 1000);
return () => clearInterval(id); // 清理
}, []);

useContext

场景：状态逻辑复杂或状态之间有关联的情况。常用于表单或状态机。

多个组件传值，层级复杂的组件之间数据传递，避免因为props造成难以维护的痛点

复制代码

创建 context
const ThemeContext = React.createContext("light");
使用 Provider 包裹组件树
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>
消费 context
const theme = useContext(ThemeContext);
return <div className={`theme-${theme}`}>当前主题：{theme}</div>;

useReducer

适用于状态较复杂或状态之间关联性强的场景

复制代码

基本语法
const [state, dispatch] = useReducer(reducer, initialState);
示例一：计数器
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    default: return state;
  }
};
const [count, dispatch] = useReducer(reducer, 0);
<button onClick={() => dispatch({ type: 'increment' })}>+</button>

useReducer + useContext 配合使用（全局状态管理）

复制代码

const AppContext = createContext(null);

const initialState = { user: null };
function reducer(state, action) {
  switch (action.type) {
    case 'login': return { ...state, user: action.payload };
    case 'logout': return { ...state, user: null };
    default: return state;
  }
}

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

function useApp() {
  return useContext(AppContext);
}

useCallback

场景：

父组件传递函数给子组件
避免组件重复渲染

const handleClick = useCallback(() => doSomething(id), [id]);

useMemo

场景：

缓存计算结果
避免重复渲染时昂贵计算

const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);

useRef

场景：

访问 DOM 元素
保存可变值不触发重渲染（如定时器ID

const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => inputRef.current?.focus(), []);

useImperativeHandle

场景：暴露子组件的内部方法给父组件（配合 forwardRef 使用）

复制代码

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current?.focus()
}));

useLayoutEffect

场景：

在 DOM 渲染之前同步执行副作用（如测量 DOM）

useLayoutEffect(() => {
const height = ref.current.offsetHeight;
// 设置样式
}, []);

与 useEffect 类似，但在 DOM 渲染前执行，可能阻塞绘制。

useDebugValue

复制代码

useDebugValue(state ? "Online" : "Offline");

react18 相关hooks

useTransition

场景：将更新标记为"过渡"，提升响应性（如搜索输入）

复制代码

const [isPending, startTransition] = useTransition();
startTransition(() => setSearchQuery(value));

useDeferredValue

场景：延迟某个值的更新，防止因频繁输入导致 UI 卡顿

复制代码

const deferredQuery = useDeferredValue(query);

useId

场景：在客户端和服务端生成一致的唯一 ID（用于可访问性）

复制代码

const id = useId();
<label htmlFor={id}>Name</label>
<input id={id} />

useSyncExternalStore

场景：订阅外部 store（如 Redux、MobX、Zustand）

复制代码

const state = useSyncExternalStore(subscribe, getSnapshot);

useInsertionEffect

场景：比 useLayoutEffect 更早执行，用于样式注入等场景（如 CSS-in-JS）

复制代码

useInsertionEffect(() => {
  // 注入样式
}, []);