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

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

React Hooks 中的 useState 和 useEffect 的作用分别是什么？请列举实例。

useState 和 useEffect 是 React Hooks 中常用的两个 Hook，它们分别用于处理组件中的状态管理和副作用处理。

1. useState：用于在函数组件中添加状态。useState 接受一个初始状态值作为参数，并返回一个数组，数组中的第一个值为当前状态值，第二个值为更新状态的函数。

import React, { useState } from 'react';

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

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
 );
}

2. useEffect：用于在函数组件中添加副作用处理。useEffect 接受两个参数：一个副作用处理函数和一个依赖数组。副作用处理函数在组件渲染或状态更新时执行，依赖数组用于指定哪些状态或属性变化时需要重新执行副作用处理函数。

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

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

 useEffect(() => {
   document.title = `You clicked ${count} times`;
 }, [count]);

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
 );
}

总之，useState 用于在函数组件中添加状态，useEffect 用于在函数组件中添加副作用处理。它们是 React Hooks 中非常重要的两个功能，可以帮助开发者更加高效地管理组件的状态和交互。

什么是 useReducer？请简述其特点和用途。

useReducer 是 React Hooks 中的一种方法，它用于在函数组件中实现状态的转换器。相比于 useState，useReducer 可以处理更加复杂的状态变化逻辑，例如状态的组合、分治等。

特点：

1. 接受两个参数：一个是状态转换函数，另一个是初始状态。
2. 状态转换函数接收两个参数：一个是当前状态，另一个是 action 对象。
3. 状态转换函数需要返回一个新的状态。

用途：

1. 处理复杂的组合状态：当组件的状态由多个子状态组合时，可以使用 useReducer 进行状态转换。
2. 处理分治状态：当组件的状态需要进行分治处理时，可以使用 useReducer 进行状态转换。
3. 处理副作用处理：当组件需要对某些操作进行副作用处理时，可以使用 useReducer 进行状态转换。

示例：

import React, { useReducer } from 'react';

function reducer(state, action) {
 switch (action.type) {
   case 'increment':
     return { count: state.count + 1 };
   case 'decrement':
     return { count: state.count - 1 };
   default:
     throw new Error();
 }
}

function Example() {
 const [state, dispatch] = useReducer(reducer, { count: 0 });

 return (
   <div>
     <p>Count: {state.count}</p>
     <button onClick={() => dispatch({ type: 'increment' })}>+</button>
     <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
   </div>
 );
}

在这个示例中，我们定义了一个简单的状态转换函数 reducer，它接收两个参数：当前状态 state 和操作 action。根据操作的类型，我们可以更新状态。然后，我们使用 useReducer 方法将 reducer 函数和初始状态 { count: 0 } 传递给组件。最后，我们将状态和 dispatch 函数返回给组件，以便在组件中处理状态变化和操作。

什么是 useCallback？请简述其特点和用途。

useCallback 是 React Hooks 中的一种方法，它用于在函数组件中缓存函数。当一个函数被多次调用时，如果它的参数不变，那么我们可以使用 useCallback 将其缓存，避免重复创建该函数。这在性能优化和减少不必要的重新渲染中非常有用。

特点：

1. 接受一个函数参数。
2. 返回一个新的函数，这个函数是输入函数的缓存版本。

用途：

1. 避免重复创建函数：当一个函数被多次调用时，如果它的参数不变，那么我们可以使用 useCallback 将其缓存，避免重复创建该函数。
2. 提高性能：使用 useCallback 可以避免在每次渲染时都创建新的函数，从而提高组件的性能。
3. 保持函数属性：使用 useCallback 可以保持函数的属性，例如 isActive 属性等。

示例：

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

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

 const handleClick = () => {
   setCount(count + 1);
 };

 const memoizedHandleClick = useCallback(handleClick, [count]);

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={memoizedHandleClick}>Click me</button>
   </div>
 );
}

在这个示例中，我们定义了一个名为 handleClick 的函数，它接受一个参数 count，并将其递增。然后，我们使用 useCallback 方法将 handleClick 函数缓存，传入 [count] 作为依赖项。这样，每次组件渲染时，handleClick 函数都会被缓存，而不会被重复创建。