react.js 前端 前端框架 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 (

);

}

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

手动控制组件的生命周期

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

function Example() {

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

useEffect(() => {

setTimeout(() => {

setIsLoading(false);

}, 2000);

}, []);

return (

);

}

在这个示例中，我们使用 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 (

);

}

在这个示例中，我们使用 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 (

);

}

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

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

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

function Example() {

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

const incrementCount = useCallback((amount) => {

setCount(count + amount);

}, [count]);

return (

);

}

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

总之，在 useCallback 中优化函数调用可以减少不必要的函数创建，从而提高组件性能。这种优化方法适用于需要重复调用的函数，例如事件处理程序、状态更新函数等。

相关链接