React学习历程之useReducer

写了个react项目发现自己对useReducer 这个hooks还是很陌生 然后就去React文档大概看了下看了demo之后 感觉还是不是很懂（自己太菜了）useReducer 和useState傻傻分不清不知道useReducer 怎么用

然后去看了几个大佬写的demo大概懂了点

useReducer 和 useState 是 React 中用于管理组件状态的两个不同的 Hook。它们可以用于管理组件的状态，但在一些情况下，useReducer 更适合处理复杂的状态逻辑。

我这里举一个简单的例子demo讲一下

useState

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); //新建一个useState

  const increment = () => {
    setCount(count + 1); //通过setCount方法改变count的初始值
  };

  const decrement = () => {
    setCount(count - 1);//同上
  };

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

export default Counter;

• useState：使用简单，只需提供初始状态值，返回一个状态值和更新状态的函数。
• useState：适用于简单的状态管理，单个状态的更新。

useReducer

import React, { useReducer } from "react";

// 定义 reducer 函数，根据操作类型来更新状态
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 }; // 增加 count 值
    case "DECREMENT":
      return { count: state.count - 1 }; // 减少 count 值
    default:
      return state;
  }
}

function Counter() {
  const initialState = { count: 0 }; // 初始状态为 0
  const [state, dispatch] = useReducer(reducer, initialState); // 使用 useReducer 初始化状态

  const increment = () => {
    dispatch({ type: "INCREMENT" }); // 调用useReducer方法 发送 INCREMENT 操作
  };

  const decrement = () => {
    dispatch({ type: "DECREMENT" }); // 调用useReducer方法 发送 DECREMENT 操作
  };

  return (
    <div>
      <p>Count: {state.count}</p> {/* 显示当前 count 值 */}
      <button onClick={increment}>Increment</button> {/* 点击调用 increment 函数 */}
      <button onClick={decrement}>Decrement</button> {/* 点击调用 decrement 函数 */}
    </div>
  );
}

export default Counter;

• useReducer：需要定义一个 reducer 函数来处理状态更新逻辑，返回一个新的状态。
• useReducer：适用于复杂的状态管理，包含多个相关状态，需要根据操作类型进行状态更新。

有点复杂？那我就举一个更简单的 useReducer 的demo

import React, { useReducer } from "react";

// 定义 reducer 函数，根据操作类型来更新状态
function reducer(state, action) {
  switch (action.type) {
    case "TOGGLE":
      return !state; // 取反状态值，切换开关状态
    default:
      return state;
  }
}

function Switch() {
  const [isOn, dispatch] = useReducer(reducer, false); // 使用 useReducer 初始化状态，初始状态为 false

  const toggleSwitch = () => {
    dispatch({ type: "TOGGLE" }); //调用useReducer方法   发送 TOGGLE 操作
  };

  return (
    <div>
      <button onClick={toggleSwitch}>{isOn ? "ON" : "OFF"}</button> {/* 根据状态值显示 "ON" 或 "OFF" */}
    </div>
  );
}

export default Switch;

好了 useReducer 的讲解大概就这些 有不足之处各位大佬请赐教！！！