useState和useReducer

useState和 useReducer 都是 React Hooks，它们用于处理组件内部的状态和计算

1.useState

useState 是 React 中最基础的状态管理 Hook，它允许在函数组件中添加局部状态。

import React, { useState } from 'react';

function MyComponent() {

const [state, setState] = useState(initialState);

return (

 <div>{state}</div>

);

}

initialState 是状态的初始值，可以是任何类型（如字符串、数字、对象、数组等）

state 是当前的状态值。

setState 是一个函数，用于更新状态。当调用 setState 时，React 会重新渲染组件，并传入新的状态值

2.useReducer

useReducer 是一个更高级的状态管理 Hook，它适用于管理复杂的状态逻辑，尤其是当状态逻辑包含多个子状态时。

import React, { useReducer } from 'react';

function reducer(state, action)

{

switch (action.type) {

case 'A':

return {type:"A",payload:state.payload + action.payload}

case "B"

return {type:"B",state.payload + action.payload)

default:

throw new Error();

} }

function MyComponent() {

const initialState = {type:"A",payload:10 };

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

 return (

<div>state.payload</div>

<button onClick={()=>dispatch({type:"A",payload:10})}></button>

);

}

reducer 是一个函数，它接受当前的状态和一个动作对象，并返回一个新的状态。

initialState 是状态的初始值。

state 是当前的状态值。

dispatch 是一个函数，用于触发状态的更新。可以通过调用 dispatch({ type: 'A', payload:10}) 来发送一个动作。