登录
首页 >  文章 >  前端

useReducer 以及它与 useState 的不同之处

来源：dev.to

时间：2024-11-06 12:25:00 326浏览 收藏

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

useReducer 以及它与 useState 的不同之处

目录

  1. 简介
  2. 何时使用 usestate
  3. 何时使用 usereducer
  4. 示例 1：带有 usestate 的计数器应用
  5. 示例 2：使用 usereducer 的计数器应用
  6. 示例 3：使用 usereducer 处理表单输入
  7. 示例 4：使用 usereducer 构建测验应用程序
  8. usestate 和 usereducer 的比较
  9. 结论

介绍

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

结论

usestate 和 usereducer 都是用于管理功能组件中状态的强大钩子。 usestate 最适合简单状态，而 usereducer 在处理状态更新密切相关的更复杂场景时表现出色。选择正确的状态取决于您需要管理的状态的复杂性。

到这里，我们也就讲完了《useReducer 以及它与 useState 的不同之处》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>