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

在这里插入图片描述

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

文章目录

- 如何在 useEffect 中处理副作用？请列举实例。
- 如何在 useCallback 中优化函数调用？请列举实例。

如何在 useEffect 中处理副作用？请列举实例。

在 useEffect 中，我们可以使用 useEffect 提供的 effect 方法来处理副作用。effect 方法接受一个副作用处理函数作为参数，该函数在组件的渲染完成后执行。

下面是一些处理副作用的示例：

订阅数据

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

function Example() {
 const [data, setData] = useState(null);

 useEffect(() => {
   const fetchData = async () => {
     const result = await fetch('https://api.example.com/data');
     const data = await result.json();
     setData(data);
   };

   fetchData();
 }, []);

 return (
   <div>
     {data ? <p>{data.message}</p> : <p>Loading...</p>}
   </div>
 );
}

在这个示例中，我们使用 useEffect 订阅了一个数据源，并在组件渲染完成后执行 fetchData 函数。该函数从 API 获取数据，并将数据设置为组件的状态。

手动控制组件的生命周期

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

function Example() {
 const [isLoading, setIsLoading] = useState(true);

 useEffect(() => {
   setTimeout(() => {
     setIsLoading(false);
   }, 2000);
 }, []);

 return (
   <div>
     {isLoading ? <p>Loading...</p> : <p>Hello, world!</p>}
   </div>
 );
}

在这个示例中，我们使用 useEffect 来手动控制组件的生命周期。我们使用 setTimeout 来模拟一个延迟操作，并在延迟完成后将 isLoading 状态设置为 false。

处理副作用的副作用

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

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

 useEffect(() => {
   setCount(count + 1);
 }, [count]);

 useEffect(() => {
   console.log('Count updated:', count);
 }, [count]);

 return (
   <div>
     <p>Count: {count}</p>
   </div>
 );
}

在这个示例中，我们使用 useEffect 来处理副作用的副作用。我们使用 setCount 方法来更新 count 状态，然后使用 useEffect 的第二个参数来处理副作用。在这个例子中，我们将 count 值打印到控制台。

总之，在 useEffect 中处理副作用时，我们可以使用 useEffect 提供的 effect 方法来处理副作用。这个方法接受一个副作用处理函数作为参数，该函数在组件的渲染完成后执行。我们可以使用 useState 和 setTimeout 等方法来模拟副作用，或者使用 useEffect 的第二个参数来处理副作用的副作用。

如何在 useCallback 中优化函数调用？请列举实例。

在 useCallback 中优化函数调用可以减少不必要的函数创建，从而提高组件性能。下面是一些优化函数调用的示例：

避免在每次渲染时都创建新的函数实例

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

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

 const incrementCount = useCallback(() => {
   setCount(count + 1);
 }, [count]);

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={incrementCount}>Increment count</button>
   </div>
 );
}

在这个示例中，我们使用 useCallback 来创建一个缓存函数 incrementCount，该函数在组件渲染完成后执行。通过这种方式，我们可以避免在每次渲染时都创建新的函数实例，从而提高组件性能。

避免在组件整个生命周期内都创建相同的函数实例

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

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

 const incrementCount = useCallback((amount) => {
   setCount(count + amount);
 }, [count]);

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => incrementCount(1)}>Increment count by 1</button>
     <button onClick={() => incrementCount(5)}>Increment count by 5</button>
   </div>
 );
}