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

2023-12-31 05:23:40

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过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 的计算结果,并在组件下一次渲染时使用缓存结果。

  1. 缓存计算结果为组件的属性
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() 来聚焦输入框。

  1. 获取一个元素的引用并将其存储在数组中
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 元素的场景,例如获取元素的焦点、修改元素的属性等。

文章来源:https://blog.csdn.net/m0_49768044/article/details/135232271
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。