useReducer 以及它与 useState 的不同之处

目录

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

介绍

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 explanationsconst 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 addedconst initialstate = {  currentquestion: 0,  score: 0,  showscore: false,  selectedoption: null,  showfeedback: false, // new state for showing answer feedback};// enhanced reducer with feedback handlingconst 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 stateconst 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}  
)}

登录后复制

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

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

测验应用程序的托管链接

测验技术写作.vercel.app

usestate 和 usereducer 的比较

best forsimple statecomplex state logicstate managementdirect, using setstatemanaged through a reducer functionboilerplate codeminimalrequires more setupstate updateinline with setstatemanaged by dispatch and reducer

结论

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

以上就是useReducer 以及它与 useState 的不同之处的详细内容，更多请关注【创想鸟】其它相关文章！