React 18中关于Hooks的经典面试题

以下是一些React 18中关于Hooks的经典面试题：

基础理解类

1. React Hooks的设计动机是什么？

   • 解决类组件的“嵌套地狱”问题，使组件逻辑更清晰。
   • 使状态逻辑更易于复用和组合，通过自定义Hook实现逻辑提取。
   • 降低学习成本，无需理解复杂的class语法和this绑定。

2. 使用Hooks时需要遵守哪些规则？

   • 只在函数组件的顶层调用Hooks，不能在循环、条件语句或嵌套函数中调用。
   • 只在React函数组件或自定义Hook中调用Hooks，不能在普通JavaScript函数中调用。

核心Hooks使用类

3. useState和useReducer有什么区别？何时选择使用useReducer？

   • useState：用于管理简单的局部状态，适合单个状态值的更新。
   • useReducer：适合处理复杂的状态逻辑，状态包含多个子值且相互关联，或者需要统一管理更新逻辑。
   • 选择useReducer的场景：
     • 状态更新依赖于前一个状态，如复杂的表单验证。
     • 需要执行副作用（如数据请求）后更新状态。

4. useEffect的作用是什么？如何正确使用它处理副作用？

   • 作用：处理副作用，如数据获取、订阅事件、DOM操作等。
   • 正确使用：
     • 第二个参数是依赖数组，用于控制useEffect何时重新执行。
     • 返回一个函数用于清理副作用，防止内存泄漏。
   • 示例：

     useEffect(() => {
       const subscription = someEventSource.subscribe();
       return () => {
         subscription.unsubscribe();
       };
     }, [dependency]);
     

性能优化类

5. useMemo和useCallback有什么区别？何时使用它们？

   • useMemo：缓存计算结果，防止在每次渲染时重新计算。
   • useCallback：缓存回调函数，避免在每次渲染时创建新函数。
   • 使用场景：
     • 当计算结果或回调函数依赖某些值，且这些值变化不频繁时，使用useMemo或useCallback提升性能。
     • 传递给子组件的函数或值，避免不必要的重新渲染。

6. 如何避免在函数组件中因useEffect依赖数组不当导致的内存泄漏或无限循环？

   • 内存泄漏：确保在useEffect返回的清理函数中取消订阅或清理资源。
   • 无限循环：仔细选择依赖数组，只包含影响副作用的值。如果依赖数组为空[]，则副作用只在组件挂载和卸载时执行。

自定义Hook类

7. 什么是自定义Hook？如何创建自定义Hook？
   • 自定义Hook：封装可复用的状态逻辑，以use开头，内部可以调用其他Hooks。
   • 创建示例：

     function useFetch(url) {
       const [data, setData] = useState(null);
       const [loading, setLoading] = useState(true);
       const [error, setError] = useState(null);
     
       useEffect(() => {
         fetch(url)
           .then((res) => res.json())
           .then((data) => {
             setData(data);
             setLoading(false);
           })
           .catch((err) => {
             setError(err);
             setLoading(false);
           });
       }, [url]);
     
       return { data, loading, error };
     }
     

Context与状态管理类

8. useContext的作用是什么？如何与useReducer结合实现状态共享？
   • useContext：在函数组件中访问React Context，获取上下文中的值。
   • 结合useReducer实现状态共享：
     • 在顶层组件使用useReducer管理状态，并通过Context.Provider提供状态和dispatch函数。
     • 子组件通过useContext获取状态和dispatch，实现跨组件通信。

高级Hooks类

9. useRef的作用是什么？与useState有何区别？

   • useRef：
     • 创建一个可变的引用，其.current属性可以存储任意值，且更新不会触发组件重新渲染。
     • 常用于保存DOM节点引用或存储需要在组件生命周期之间保持不变的变量。
   • 与useState的区别：
     • useState用于管理组件状态，更新会触发重新渲染。
     • useRef用于获取可变引用，更新不会触发重新渲染。

10. useLayoutEffect和useEffect有什么区别？何时使用useLayoutEffect？

    • 区别：
      • useEffect在浏览器完成渲染后进行副作用处理（异步）。
      • useLayoutEffect在浏览器渲染前同步执行副作用，会阻塞渲染。
    • 使用useLayoutEffect的场景：
      • 需要同步更新DOM布局，如测量DOM尺寸或位置。
      • 需要确保副作用在浏览器渲染前执行，避免页面闪烁。

以上面试题涵盖了React 18中Hooks的基础知识、核心用法、性能优化、自定义Hook以及高级特性等方面，希望对你有所帮助。