【Typescript学习】使用 React 和 TypeScript 构建web应用useReducer、扑街了的分区功能【完结了】

import React, { useReducer } from 'react';
 
// 定义初始状态和状态更新reducer
const initialState = { count: 0 };
function reducer(state: typeof initialState, action: { type: string; payload: number }) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.payload };
    case 'decrement':
      return { count: state.count - action.payload };
    default:
      throw new Error();
  }
}
 
// 使用useReducer的函数组件
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      {state.count}
      <button onClick={() => dispatch({ type: 'increment', payload: 1 })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement', payload: 1 })}>-</button>
    </>
  );
}
 
export default Counter;

这段代码使用了React的useReducer钩子来管理组件的状态，它定义了一个初始状态和一个处理状态更新的reducer函数。这是管理React状态的一个更为高效且可扩展的方法，它避免了每次状态更新都要重新渲染整个组件树的问题。这个例子展示了如何使用useReducer来创建一个简单的计数器应用。