useReducer基本使用

useReducer 是 React 提供的一个 Hook，用于管理组件的状态逻辑。它可以更好地处理复杂的状态管理需求，尤其是当状态之间存在依赖关系、需要多个状态合并处理、或者状态逻辑变得复杂时。

useReducer的使用

import { useReducer } from 'react'; 

const initialState = {
  count: 0
};
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'SET':
      return { count: action.payload };
    default:
      return state;
  }
};

function Counter() { 
    const [state, dispatch] = useReducer(reducer, initialState); 
    return ( 
        <div> Count: {state.count} 
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> 
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
            <button onClick={() => dispatch({ type: 'SET', payload: 100 })}>Decrement</button>
         </div> 
   ); }

何时使用 useReducer：

• 状态逻辑复杂化： 当你发现使用 useState 使得状态逻辑变得复杂、难以维护时，可以考虑使用 useReducer。
• 需要集中管理状态： 当组件内部有多个相关状态需要共享或者相互影响时，useReducer 可以更好地组织和管理这些状态。
• 性能优化考虑： 在某些场景下，使用 useReducer 可能带来性能上的一些优势，特别是当状态较多或者状态结构复杂时。

但要注意，并不是所有的状态都适合使用 useReducer，简单的状态逻辑可以继续使用 useState，只有在状态变得复杂或者需要更好的状态管理时才考虑使用 useReducer。