React Hooks 面试题 | 03.精选React Hooks面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

什么是 useMemo？请简述其特点和用途。

useMemo 是 React Hooks 中的一种方法，它用于在函数组件中缓存计算结果。当一个计算结果在组件的多个渲染周期中被多次调用时，我们可以使用 useMemo 将其缓存，避免重复计算。这对于提高组件性能和避免不必要的重新渲染非常有用。

特点：

1. 接受一个函数参数。
2. 返回一个新的函数，这个函数是输入函数的缓存版本。

用途：

1. 避免重复计算：当一个计算结果在组件的多个渲染周期中被多次调用时，如果它的参数不变，那么我们可以使用 useMemo 将其缓存，避免重复计算。
2. 提高性能：使用 useMemo 可以避免在每次渲染时都进行相同的计算，从而提高组件的性能。
3. 保持计算属性：使用 useMemo 可以保持计算属性的属性，例如 isActive 属性等。

示例：

import React, { useState, useMemo } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 const doubleCount = useMemo(() => count * 2, [count]);

 return (
   <div>
     <p>You clicked {count} times</p>
     <p>Double count: {doubleCount}</p>
     <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
 );
}

在这个示例中，我们定义了一个名为 doubleCount 的计算属性，它接受一个参数 count，并将其乘以 2。然后，我们使用 useMemo 方法将 doubleCount 缓存，传入 [count] 作为依赖项。这样，每次组件渲染时，doubleCount 属性都会被缓存，而不会被重复计算。

什么是 useContext？请简述其特点和用途。

useContext 是 React Hooks 中的一种方法，它用于在函数组件中使用 React 的上下文。在 React 中，上下文是一个用于传递数据的容器，通常用于在组件树中传递数据，而不需要显式地传递 props。

特点：

1. 接受一个上下文对象参数。
2. 返回一个上下文值。

用途：

1. 在组件树中传递数据：useContext 可以用于在组件树中传递数据，而不需要显式地传递 props。这对于在组件层次结构中传递全局状态或配置信息非常有用。
2. 保持状态独立：useContext 可以保持状态独立，即使组件层次结构中有多个组件使用相同的上下文，它们的状态也是独立的。
3. 避免全局状态：useContext 可以避免全局状态，从而使组件更加模块化。

示例：

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function Example() {
 return (
   <ThemeContext.Provider value="dark">
     <p>The theme is {useContext(ThemeContext)}</p>
   </ThemeContext.Provider>
 );
}

在这个示例中，我们定义了一个名为 ThemeContext 的上下文对象，并使用 createContext 方法创建了它。然后，我们使用 useContext 方法在组件中获取上下文值，并将其显示在页面上。通过这种方式，我们可以在整个组件树中传递主题配置信息，而不需要显式地传递 props。

什么是 useRef？请简述其特点和用途。

useRef 是 React Hooks 中的一种方法，它用于创建一个引用（reference），以便在函数组件中更轻松地操作 DOM 元素或组件实例。

特点：

1. 接受一个初始值参数。
2. 返回一个引用对象，包含一个 current 属性，用于访问 DOM 元素或组件实例。

用途：

1. 操作 DOM 元素：useRef 可以用于操作 DOM 元素，例如更改属性、触发事件等。这对于在函数组件中操作 DOM 元素非常有用。
2. 获取组件实例：useRef 还可以用于获取组件实例，以便在组件的生命周期钩子（如 componentDidMount）中操作该组件。
3. 存储状态：useRef 可以将一个值存储在引用对象中，以便在组件的整个生命周期中使用该值。这对于需要在组件的生命周期内多次使用某个值时非常有用。

示例：

import React, { useRef } from 'react';

function Example() {
 const inputRef = useRef(null);

 const handleClick = () => {
   inputRef.current.focus();
 };

 return (
   <div>
     <input type="text" ref={inputRef} />
     <button onClick={handleClick}>Focus input</button>
   </div>
 );
}

在这个示例中，我们使用 useRef 创建了一个引用对象 inputRef，并将其作为 ref 属性传递给 input 元素。然后，我们定义了一个 handleClick 函数，用于在点击按钮时聚焦输入框。通过这种方式，我们可以使用 inputRef.current 访问 input 元素的 DOM 节点，并触发 focus 事件。