🤍 前端開發(fā)工程師（主業(yè)）、技術(shù)博主（副業(yè)）、已過CET6
🍨 阿珊和她的貓_CSDN個人主頁
🕠 牛客高級專題作者、在牛客打造高質(zhì)量專欄《前端面試必備》
🍚 藍(lán)橋云課簽約作者、已在藍(lán)橋云課上架的前后端實戰(zhàn)課程《Vue.js 和 Egg.js 開發(fā)企業(yè)級健康管理項目》、《帶你從入門到實戰(zhàn)全面掌握 uni-app》

如何在 useState 中更新狀態(tài)？請列舉實例。

在 useState 中，可以使用 setState 方法來更新狀態(tài)。setState 方法接受兩個參數(shù)：一個用于更新狀態(tài)的函數(shù)和一個用于傳遞狀態(tài)更新的依賴數(shù)組。

下面是一些更新狀態(tài)的示例：

1. 更新狀態(tài)的函數(shù)接受兩個參數(shù)：當(dāng)前狀態(tài)和更新后的狀態(tài)。

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 的函數(shù)，它接受一個 count 參數(shù)，并將其遞增 1。然后，我們使用 setCount 方法將 count 設(shè)置為更新后的值。

2. 更新狀態(tài)的函數(shù)可以接受多個參數(shù)，這些參數(shù)將作為數(shù)組傳遞給函數(shù)。

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 的函數(shù)，它接受一個 amount 參數(shù)，并將其與當(dāng)前的 count 相加。然后，我們使用 setCount 方法將 count 設(shè)置為更新后的值。

3. 更新狀態(tài)的函數(shù)可以返回一個新狀態(tài)，而不是直接更新狀態(tài)。

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 的函數(shù)，它返回一個 setCount 調(diào)用，該調(diào)用將 count 設(shè)置為更新后的值。然后，我們將該函數(shù)作為按鈕的 onClick 事件處理程序。

如何在 useReducer 中更新狀態(tài)？請列舉實例。

在 useReducer 中，可以使用 useReducer 提供的 dispatch 方法來更新狀態(tài)。dispatch 方法接受一個事件對象作為參數(shù)，該事件對象包含一個 type 屬性，該屬性用于指定要執(zhí)行的操作，以及一個 payload 屬性，該屬性包含要傳遞給操作的數(shù)據(jù)。

下面是一些更新狀態(tài)的示例：

1. 定義一個操作函數(shù)，它接受一個狀態(tài)和一個事件對象作為參數(shù)，并返回一個新的狀態(tài)。

import React, { useReducer } from 'react';function incrementCount(state, action) {return { count: state.count + action.payload };
}

在這個示例中，我們定義了一個名為 incrementCount 的操作函數(shù)，它接受一個狀態(tài)和一個事件對象作為參數(shù)。事件對象包含一個 payload 屬性，該屬性包含要傳遞給操作的數(shù)據(jù)。

2. 使用 useReducer 包裹我們的操作函數(shù)，并提供一個初始狀態(tài)。

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 的函數(shù)，它接受一個狀態(tài)和一個事件對象作為參數(shù)。事件對象包含一個 type 屬性，該屬性用于指定要執(zhí)行的操作，以及一個 payload 屬性，該屬性包含要傳遞給操作的數(shù)據(jù)。然后，我們使用 useReducer 包裹 reducer 函數(shù)，并提供一個初始狀態(tài)。

3. 使用 dispatch 方法來更新狀態(tài)。

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 的函數(shù)，它接受一個狀態(tài)和一個事件對象作為參數(shù)。事件對象包含一個 type 屬性，該屬性用于指定要執(zhí)行的操作，以及一個 payload 屬性，該屬性包含要傳遞給操作的數(shù)據(jù)。然后，我們使用 useReducer 包裹 reducer 函數(shù)，并提供一個初始狀態(tài)。最后，我們使用 dispatch 方法來更新狀態(tài)。