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

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

如何在 useState 中更新状态？请列举实例。

在 useState 中，可以使用 setState 方法来更新状态。setState 方法接受两个参数：一个用于更新状态的函数和一个用于传递状态更新的依赖数组。

下面是一些更新状态的示例：

1. 更新状态的函数接受两个参数：当前状态和更新后的状态。

import React, { useState } from 'react';

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

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

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

在这个示例中，我们定义了一个名为 incrementCount 的函数，它接受一个 count 参数，并将其递增 1。然后，我们使用 setCount 方法将 count 设置为更新后的值。

2. 更新状态的函数可以接受多个参数，这些参数将作为数组传递给函数。

import React, { useState } from 'react';

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

 const incrementCount = (amount) => {
   setCount(count + amount);
 };

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

在这个示例中，我们定义了一个名为 incrementCount 的函数，它接受一个 amount 参数，并将其与当前的 count 相加。然后，我们使用 setCount 方法将 count 设置为更新后的值。

3. 更新状态的函数可以返回一个新状态，而不是直接更新状态。

import React, { useState } from 'react';

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

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

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

在这个示例中，我们定义了一个名为 incrementCount 的函数，它返回一个 setCount 调用，该调用将 count 设置为更新后的值。然后，我们将该函数作为按钮的 onClick 事件处理程序。

如何在 useReducer 中更新状态？请列举实例。

在 useReducer 中，可以使用 useReducer 提供的 dispatch 方法来更新状态。dispatch 方法接受一个事件对象作为参数，该事件对象包含一个 type 属性，该属性用于指定要执行的操作，以及一个 payload 属性，该属性包含要传递给操作的数据。

下面是一些更新状态的示例：

1. 定义一个操作函数，它接受一个状态和一个事件对象作为参数，并返回一个新的状态。

import React, { useReducer } from 'react';

function incrementCount(state, action) {
 return { count: state.count + action.payload };
}

在这个示例中，我们定义了一个名为 incrementCount 的操作函数，它接受一个状态和一个事件对象作为参数。事件对象包含一个 payload 属性，该属性包含要传递给操作的数据。

2. 使用 useReducer 包裹我们的操作函数，并提供一个初始状态。

import React, { useReducer } from 'react';

function Example() {
 const initialState = { count: 0 };

 const reducer = (state, action) => {
   switch (action.type) {
     case 'increment':
       return incrementCount(state, action);
     default:
       return state;
   }
 };

 const [state, dispatch] = useReducer(reducer, initialState);

 return (
   <div>
     <p>Count: {state.count}</p>
     <button onClick={() => dispatch({ type: 'increment', payload: 1 })}>
       Increment count
     </button>
   </div>
 );
}

在这个示例中，我们定义了一个名为 reducer 的函数，它接受一个状态和一个事件对象作为参数。事件对象包含一个 type 属性，该属性用于指定要执行的操作，以及一个 payload 属性，该属性包含要传递给操作的数据。然后，我们使用 useReducer 包裹 reducer 函数，并提供一个初始状态。

3. 使用 dispatch 方法来更新状态。

import React, { useReducer } from 'react';

function Example() {
 const initialState = { count: 0 };

 const reducer = (state, action) => {
   switch (action.type) {
     case 'increment':
       return incrementCount(state, action);
     default:
       return state;
   }
 };

 const [state, dispatch] = useReducer(reducer, initialState);

 return (
   <div>
     <p>Count: {state.count}</p>
     <button onClick={() => dispatch({ type: 'increment', payload: 1 })}>
       Increment count
     </button>
   </div>
 );
}

在这个示例中，我们定义了一个名为 reducer 的函数，它接受一个状态和一个事件对象作为参数。事件对象包含一个 type 属性，该属性用于指定要执行的操作，以及一个 payload 属性，该属性包含要传递给操作的数据。然后，我们使用 useReducer 包裹 reducer 函数，并提供一个初始状态。最后，我们使用 dispatch 方法来更新状态。