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

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

如何在 useMemo 中缓存计算结果？请列举实例。

在 useMemo 中缓存计算结果的方法如下：

1. 定义一个函数，该函数接受输入参数并返回计算结果。
2. 使用 useMemo 包裹该函数，并将输入参数作为参数传递给该函数。
3. 在组件渲染完成后，useMemo 会缓存函数的计算结果。

下面是一些缓存计算结果的示例：

1. 缓存计算结果为组件的属性

import React, { useMemo } from 'react';

function Example() {
 const expensiveFunction = () => {
   // 这里是一些 expensive 的计算
 };

 const memoizedValue = useMemo(() => expensiveFunction(), []);

 return (
   <div>
     <p>Memoized value: {memoizedValue}</p>
   </div>
 );
}

在这个示例中，我们定义了一个 expensiveFunction 函数，该函数进行了一些 expensive 的计算。然后，我们使用 useMemo 包裹该函数，并将空数组作为参数传递给该函数。这样，useMemo 会缓存 expensiveFunction 的计算结果，并在组件下一次渲染时使用缓存结果。

2. 缓存计算结果为组件的属性

import React, { useMemo } from 'react';

function Example() {
 const expensiveFunction = (a, b) => {
   // 这里是一些 expensive 的计算
 };

 const memoizedValue = useMemo(() => expensiveFunction(2, 3), [2, 3]);

 return (
   <div>
     <p>Memoized value: {memoizedValue}</p>
   </div>
 );
}

在这个示例中，我们定义了一个 expensiveFunction 函数，该函数接受两个参数并进行了一些 expensive 的计算。然后，我们使用 useMemo 包裹该函数，并将参数数组作为参数传递给该函数。这样，useMemo 会缓存 expensiveFunction 的计算结果，并在组件下一次渲染时使用缓存结果。

总之，在 useMemo 中缓存计算结果的方法是使用 useMemo 包裹计算函数，并将输入参数作为参数传递给该函数。这样，useMemo 会缓存函数的计算结果，并在组件下一次渲染时使用缓存结果。这种方法适用于需要重复计算相同输入参数的函数，例如计算表单数据、获取数据等。

如何在 useRef 中获取元素的引用？请列举实例。

在 useRef 中获取元素的引用，可以通过以下步骤实现：

1. 调用 useRef 函数，创建一个新的引用对象。
2. 返回引用对象的 current 属性，该属性指向当前的 DOM 元素。

下面是一些在 useRef 中获取元素引用的示例：

1. 获取一个元素的引用

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.focus() 来聚焦输入框。

2. 获取一个元素的引用并将其存储在数组中

import React, { useRef } from 'react';

function Example() {
 const [inputRef, setInputRef] = useRef(null);

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

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

在这个示例中，我们使用 useRef 创建了一个引用对象 inputRef，并将其作为数组的第一个元素返回。然后，我们将 inputRef 的值传递给 setInputRef 函数，作为 ref 属性传递给 input 元素。这样，我们可以将 inputRef 的值设置为我们需要引用的元素。

总之，在 useRef 中获取元素引用可以通过调用 useRef 函数并返回引用对象的 current 属性来实现。这种方法适用于需要操作 DOM 元素的场景，例如获取元素的焦点、修改元素的属性等。