React 进阶面试题, 什么是 React 的 Hooks?它有哪些应用场景?
React 进阶面试题, 什么是 React 的 Hooks?它有哪些应用场景?
QA
Step 1
Q:: 什么是 React 的 Hooks？
A:: React Hooks 是 React 16.8 中引入的新功能，允许在不编写类的情况下使用状态和其他 React 特性。Hooks 提供了一种在函数组件中 '钩住' React 的功能的方式。常用的 Hooks 包括 useState、useEffect、useContext、useReducer 等。
Step 2
Q:: React Hooks 有哪些常见的应用场景？
A:: React Hooks 常见的应用场景包括：
1. 使用 useState 管理组件中的状态。
2. 使用 useEffect 处理副作用（如数据获取、订阅或手动更改 DOM）。
3. 使用 useContext 访问全局上下文（类似于 Redux 中的全局状态）。
4. 使用 useReducer 管理复杂的状态逻辑。
5. 使用 useRef 访问 DOM 元素或保持跨渲染周期的值。
Step 3
Q:: useState 和 useEffect 是如何工作的？
A:: useState 是一个 Hook，它返回一个状态变量和一个更新该状态的函数。useEffect 是一个 Hook，用于处理副作用，它接收一个函数作为参数，并在组件渲染后调用该函数。useEffect 可以依赖于特定的状态或道具变化，并在组件卸载时执行清理函数。
Step 4
Q:: useEffect 中的依赖数组是如何工作的？
A:: useEffect 的第二个参数是依赖数组，只有当数组中的某个依赖发生变化时，useEffect 才会重新执行。如果依赖数组为空，useEffect 只会在组件挂载和卸载时执行一次。如果没有依赖数组，每次组件渲染时 useEffect 都会执行。
Step 5
Q:: 如何自定义 Hook？
A:: 自定义 Hook 是将逻辑从组件中提取出来并在多个组件中重用的机制。自定义 Hook 只是一个函数，它的名称通常以 'use' 开头，内部可以调用其他 Hooks，并返回值供组件使用。例如，创建一个自定义 Hook 来处理表单输入逻辑：useFormInput。