前端经典面试题合集, 你常用的 React Hooks 有哪些?
前端经典面试题合集, 你常用的 React Hooks 有哪些?
QA
Step 1
Q:: 你常用的 React Hooks 有哪些?
A:: 常用的 React Hooks 包括 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, 和 useLayoutEffect 等。useState 用于在函数组件中添加状态，useEffect 用于处理副作用（如数据获取、订阅等），useContext 用于在组件树中传递数据，useReducer 用于管理复杂的状态逻辑，useCallback 和 useMemo 用于性能优化，useRef 用于访问 DOM 元素或保持可变值，useLayoutEffect 用于在 DOM 变更后立即运行效果。
Step 2
Q:: useState 和 useReducer 的区别是什么?
A:: useState 是一个简单的 Hook，适用于处理简单的状态。useReducer 适用于处理包含多个子值的复杂状态逻辑，并且它允许通过 reducer 函数集中管理状态更新逻辑。useReducer 提供了更可预测的状态管理方式，类似于 Redux 的 reducer。
Step 3
Q:: useEffect 和 useLayoutEffect 有什么不同?
A:: useEffect 在组件渲染到屏幕后执行，它适合处理副作用如数据获取、订阅等。useLayoutEffect 在所有 DOM 变更完成后同步执行，它适合处理需要在 DOM 更新后立即运行的操作，比如测量 DOM 节点尺寸、位置等。
Step 4
Q:: useCallback 和 useMemo 的作用是什么?
A:: useCallback 和 useMemo 都用于性能优化。useCallback 用于返回一个 memoized 回调函数，以避免不必要的函数重新创建。useMemo 用于返回一个 memoized 值，以避免不必要的计算。它们都可以减少因为重新渲染而导致的性能开销。
Step 5
Q:: 如何使用 useRef?
A:: useRef 创建一个可变的 ref 对象，它的 .current 属性被初始化为传入的参数。useRef 通常用于访问 DOM 元素，或者保存一个组件生命周期内不变的值。示例：const inputRef = useRef(null); 用 inputRef.current 可以访问对应的 DOM 元素。