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 (
    

      
count: {count}
       setcount(count + 1)}>increment
       setcount(count - 1)}>decrement
    
  );
}

解释

• 我们使用 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 (
    

      
count: {state.count}
       dispatch({ type: 'increment' })}>increment
       dispatch({ type: 'decrement' })}>decrement
    
  );
}

解释

• 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 (
    

       dispatch({ type: 'setname', payload: e.target.value })}
        placeholder="name"
      />
       dispatch({ type: 'setemail', payload: e.target.value })}
        placeholder="email"
      />
      
name: {state.name}
      
email: {state.email}
    
  );
}

解释

• 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 (
      

        

          
quiz complete!
          

            your score: {score} out of {quizdata.length}
          
          
            restart quiz
          
        
      
    );
  }

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

  return (
    

      

        

          

            question {currentquestion + 1}/{quizdata.length}
          
          
{currentquizdata.question}
        

        

          {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 (
               handleoptionclick(index)}
                disabled={showfeedback}
                classname={`w-full p-3 text-left rounded-lg transition-colors ${buttonstyle}`}
              >
                {option}
              
            );
          })}
        

        {showfeedback && (
          

            {iscorrectanswer(selectedoption)
              ? "correct! "
              : `incorrect. the correct answer was: ${currentquizdata.options[currentquizdata.correct]}. `}
            {currentquizdata.explanation}
          
        )}

        
          next question
        
      
    
  );
};

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 && (
  

    {isCorrectAnswer(selectedOption)
      ? "Correct! "
      : `Incorrect. The correct answer was: ${currentQuizData.options[currentQuizData.correct]}. `}
    {currentQuizData.explanation}
  
)}

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

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

测验应用程序的托管链接

usestate 和 usereducer 的比较

结论

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

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