目录
- 简介
- 何时使用 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 (
<div>
<p>count: {count}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10978" title="ECMall 繁体UFT-8"><img
src="https://img.php.cn/upload/webcode/000/000/017/176451120748586.jpg" alt="ECMall 繁体UFT-8" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10978" title="ECMall 繁体UFT-8">ECMall 繁体UFT-8</a>
<p>与 ECShop 不同的是，ECMall 是一个允许店铺加盟的多店系统。它不仅可以帮助众多成熟的网络社区实现社区电子商务还可以推进各种地域性、垂直性明显的门户网站的电子商务进程。 ECMall是一个根据融合了电子商务以及网络社区特色的产品，它不仅能使您的电子商务进程变得异常轻松，同时通过和康盛创想相关产品的结合还能进一步提高用户的活跃度以及黏性，从而促进用户的忠诚度。 ECMall 2.3.0 正</p>
</div>
<a href="/xiazai/code/10978" title="ECMall 繁体UFT-8" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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 构建测验应用程序
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>
)}
这显示了选择答案后的反馈：
*显示答案是否正确
*如果错误则显示正确答案
*包括解释
测验应用程序的托管链接
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 在处理状态更新密切相关的更复杂场景时表现出色。选择正确的状态取决于您需要管理的状态的复杂性。
