当前位置：首页 > 文章列表 > 文章 > 前端 > useReducer 以及它与 useState 的不同之处

useReducer 以及它与 useState 的不同之处

来源：dev.to 2024-11-06 12:25:00 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《useReducer 以及它与 useState 的不同之处》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

介绍

react 提供了两个用于管理状态的关键钩子：usestate 和 usereducer。虽然两者都旨在处理功能组件中的状态，但它们用于不同的场景。本文探讨了两者之间的差异，并重点介绍了何时应该使用它们，并举例说明了如何更好地理解

何时使用 usestate

usestate 是一个简单而有效的钩子，用于在以下情况下处理本地状态：

您需要管理简单的状态（如布尔值、数字或字符串）。
您希望通过最少的设置直接更新状态。
状态没有复杂的转换或对多个变量的依赖。

基本语法

const [state, setstate] = usestate(initialstate);

状态：当前状态。
setstate：更新状态的函数。
initialstate：初始状态

何时使用 usereducer

usereducer 在以下情况下很有用：

你有复杂的状态逻辑。
多个状态更新相互依赖。

基本语法

const [state, dispatch] = usereducer(reducer, initialstate);

状态：当前状态。
dispatch：向reducer发送动作以触发状态更新的函数。
reducer：reducer 是一个纯函数，它接受两个参数：当前状态和操作。它根据操作返回新状态。

基本语法

const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

动作：动作是一个描述应该发生什么变化的对象
它通常具有 type 属性和可选的 payload.
类型告诉reducer要进行什么样的状态改变。
有效负载携带更改所需的任何附加数据。
initialstate：初始状态，就像usestate中的initialstate。

示例 1 带有 usestate 的计数器应用程序

import react, { usestate } from 'react';

export default function counter() {
  const [count, setcount] = usestate(0);

  return (
    <div>
      <p>count: {count}</p>
      <button onclick={() => setcount(count + 1)}>increment</button>
      <button onclick={() => setcount(count - 1)}>decrement</button>
    </div>
  );
}

解释

我们使用 usestate 来跟踪计数值。
我们有两个按钮：一个用于增加计数状态，一个用于减少计数状态。
直接使用setcount函数更新状态。

示例 2：带有 usereducer 的计数器应用程序

import react, { usereducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default function counter() {
  const [state, dispatch] = usereducer(reducer, { count: 0 });

  return (
    <div>
      <p>count: {state.count}</p>
      <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
      <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
    </div>
  );
}

解释

reducer 函数控制状态应如何根据分派的操作进行更改。
我们不直接设置状态，而是调度操作（递增、递减）来触发更改。

示例 3：使用 usereducer 处理表单输入

让我们将概念扩展到处理具有多个输入字段的表单。此场景非常适合 usereducer，因为它根据操作更新多个状态属性。

import react, { usereducer } from 'react';

const initialstate = {
  name: '',
  email: ''
};

function reducer(state, action) {
  switch (action.type) {
    case 'setname':
      return { ...state, name: action.payload };
    case 'setemail':
      return { ...state, email: action.payload };
    default:
      return state;
  }
}

export default function form() {
  const [state, dispatch] = usereducer(reducer, initialstate);

  return (
    <div>
      <input
        type="text"
        value={state.name}
        onchange={(e) => dispatch({ type: 'setname', payload: e.target.value })}
        placeholder="name"
      />
      <input
        type="email"
        value={state.email}
        onchange={(e) => dispatch({ type: 'setemail', payload: e.target.value })}
        placeholder="email"
      />
      <p>name: {state.name}</p>
      <p>email: {state.email}</p>
    </div>
  );
}

解释

reducer 通过根据操作的类型更新不同的属性（名称、电子邮件）来管理表单状态。
dispatch 将操作发送到reducer 以更新状态。有效负载携带数据（例如输入值）。

示例 4：使用 usereducer 构建测验应用程序

注意：样式是使用 tailwindcss 完成的

import react, { usereducer } from 'react';

// quiz data with detailed explanations
const quizdata = [
  {
    question: "what hook is used to handle complex state logic in react?",
    options: ["usestate", "usereducer", "useeffect", "usecontext"],
    correct: 1,
    explanation: "usereducer is specifically designed for complex state management scenarios."
  },
  {
    question: "which function updates the state in usereducer?",
    options: ["setstate", "dispatch", "update", "setreducer"],
    correct: 1,
    explanation: "dispatch is the function provided by usereducer to trigger state updates."
  },
  {
    question: "what pattern is usereducer based on?",
    options: ["observer pattern", "redux pattern", "factory pattern", "module pattern"],
    correct: 1,
    explanation: "usereducer is inspired by redux's state management pattern."
  }
];

// initial state with feedback state added
const initialstate = {
  currentquestion: 0,
  score: 0,
  showscore: false,
  selectedoption: null,
  showfeedback: false, // new state for showing answer feedback
};

// enhanced reducer with feedback handling
const reducer = (state, action) => {
  switch (action.type) {
    case 'select_option':
      return {
        ...state,
        selectedoption: action.payload,
        showfeedback: true, // show feedback when option is selected
      };
    case 'next_question':
      const iscorrect = action.payload === quizdata[state.currentquestion].correct;
      const nextquestion = state.currentquestion + 1;
      return {
        ...state,
        score: iscorrect ? state.score + 1 : state.score,
        currentquestion: nextquestion,
        showscore: nextquestion === quizdata.length,
        selectedoption: null,
        showfeedback: false, // reset feedback for next question
      };
    case 'restart':
      return initialstate;
    default:
      return state;
  }
};

const quiz = () => {
  const [state, dispatch] = usereducer(reducer, initialstate);
  const { currentquestion, score, showscore, selectedoption, showfeedback } = state;

  const handleoptionclick = (optionindex) => {
    dispatch({ type: 'select_option', payload: optionindex });
  };

  const handlenext = () => {
    if (selectedoption !== null) {
      dispatch({ type: 'next_question', payload: selectedoption });
    }
  };

  const handlerestart = () => {
    dispatch({ type: 'restart' });
  };

  if (showscore) {
    return (
      <div classname="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
        <div classname="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
          <h2 classname="text-2xl font-bold text-center mb-4">quiz complete!</h2>
          <p classname="text-xl text-center mb-6">
            your score: {score} out of {quizdata.length}
          </p>
          <button
            onclick={handlerestart}
            classname="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
          >
            restart quiz
          </button>
        </div>
      </div>
    );
  }

  const currentquizdata = quizdata[currentquestion];
  const iscorrectanswer = (optionindex) => optionindex === currentquizdata.correct;

  return (
    <div classname="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div classname="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
        <div classname="mb-6">
          <p classname="text-sm text-gray-500 mb-2">
            question {currentquestion + 1}/{quizdata.length}
          </p>
          <h2 classname="text-xl font-semibold mb-4">{currentquizdata.question}</h2>
        </div>

        <div classname="space-y-3 mb-6">
          {currentquizdata.options.map((option, index) => {
            let buttonstyle = 'bg-gray-50 hover:bg-gray-100';

            if (showfeedback && selectedoption === index) {
              buttonstyle = iscorrectanswer(index) 
                ? 'bg-green-100 border-2 border-green-500 text-green-700'
                : 'bg-red-100 border-2 border-red-500 text-red-700';
            }

            return (
              <button
                key={index}
                onclick={() => handleoptionclick(index)}
                disabled={showfeedback}
                classname={`w-full p-3 text-left rounded-lg transition-colors ${buttonstyle}`}
              >
                {option}
              </button>
            );
          })}
        </div>

        {showfeedback && (
          <div classname={`p-4 rounded-lg mb-4 ${
            iscorrectanswer(selectedoption)
              ? 'bg-green-50 text-green-800'
              : 'bg-red-50 text-red-800'
          }`}>
            {iscorrectanswer(selectedoption)
              ? "correct! "
              : `incorrect. the correct answer was: ${currentquizdata.options[currentquizdata.correct]}. `}
            {currentquizdata.explanation}
          </div>
        )}

        <button
          onclick={handlenext}
          disabled={!showfeedback}
          classname={`w-full py-2 px-4 rounded transition-colors ${
            !showfeedback
              ? 'bg-gray-300 cursor-not-allowed'
              : 'bg-blue-500 text-white hover:bg-blue-600'
          }`}
        >
          next question
        </button>
      </div>
    </div>
  );
};

export default quiz;

解释

*usereducer 的初始状态

// initial state
const initialstate = {
  currentquestion: 0,
  score: 0,
  showscore: false,
  selectedoption: null,
  showfeedback: false, // new state for feedback
};

减速机功能

const reducer = (state, action) => {
  switch (action.type) {
    case 'select_option':
      return {
        ...state,
        selectedoption: action.payload,
        showfeedback: true, // show feedback immediately
      };
    case 'next_question':
      const iscorrect = action.payload === quizdata[state.currentquestion].correct;
      // ... rest of the logic

减速器处理三个动作：

select_option：当用户选择答案时
next_question：转到下一个问题时
restart：重新开始测验时

造型逻辑

let buttonstyle = 'bg-gray-50 hover:bg-gray-100';

if (showfeedback && selectedoption === index) {
  buttonstyle = iscorrectanswer(index) 
    ? 'bg-green-100 border-2 border-green-500 text-green-700'
    : 'bg-red-100 border-2 border-red-500 text-red-700';
}

此代码确定按钮样式：

默认：灰色背景
正确答案：绿色背景，绿色边框
错误答案：红色背景，红色边框

反馈显示

{showFeedback && (
  <div className={`p-4 rounded-lg mb-4 ${
    isCorrectAnswer(selectedOption)
      ? 'bg-green-50 text-green-800'
      : 'bg-red-50 text-red-800'
  }`}>
    {isCorrectAnswer(selectedOption)
      ? "Correct! "
      : `Incorrect. The correct answer was: ${currentQuizData.options[currentQuizData.correct]}. `}
    {currentQuizData.explanation}
  </div>
)}

这显示了选择答案后的反馈：

*显示答案是否正确
*如果错误则显示正确答案
*包括解释

测验应用程序的托管链接

测验技术写作.vercel.app

usestate 和 usereducer 的比较

feature	usestate	usereducer
best for	simple state	complex state logic
state management	direct, using setstate	managed through a reducer function
boilerplate code	minimal	requires more setup
state update	inline with setstate	managed by dispatch and reducer