React Hooks 面试题 | 06.精选React Hooks面试题-编程知识

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>);
}