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(() => {
  // 注入样式
}, []);