前端经典面试题合集, 你常用的 React Hooks 有哪些?
前端经典面试题合集, 你常用的 React Hooks 有哪些?
QA
Step 1
Q:: 你常用的 React Hooks 有哪些?
A:: 常用的 React Hooks 包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef 等。useState 用于状态管理，useEffect 用于处理副作用，useContext 用于共享状态，useReducer 用于复杂状态逻辑，useCallback 和 useMemo 用于性能优化，useRef 用于访问 DOM 元素或保存某个值的引用。
Step 2
Q:: useState 是什么，怎么使用?
A:: useState 是 React 中用于声明状态变量的 Hook。它返回一个状态变量和一个更新状态的函数。使用示例：const [count, setCount] = useState(0); 其中 count 是状态变量，setCount 是更新状态的函数，初始值为 0。
Step 3
Q:: useEffect 的作用是什么?
A:: useEffect 用于处理副作用，例如数据获取、订阅或手动操作 DOM。它接收一个函数和一个依赖数组，函数在组件渲染后执行，依赖数组为空时只在组件挂载和卸载时执行。使用示例：useEffect(() => { fetchData(); }, []);
Step 4
Q:: useContext 如何使用?
A:: useContext 用于在组件树中共享状态。首先创建一个 Context，然后在提供状态的组件中使用 Context.Provider 包裹子组件，并传递状态。在消费状态的组件中，使用 useContext 并传入 Context。使用示例：const value = useContext(MyContext);
Step 5
Q:: useReducer 适用于哪些场景?
A:: useReducer 适用于状态逻辑复杂的场景，如涉及多个子值或依赖于先前状态的状态更新。它类似于 Redux，接收一个 reducer 函数和初始状态，返回当前状态和 dispatch 函数。使用示例：const [state, dispatch] = useReducer(reducer, initialState);