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

发布时间:2023年12月29日

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过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 事件。

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