响应式学校网站,婚嫁网站设计,赣州制作网站百度,常州制作网站软件useReducer
useReducer是React提供的一个高级Hook,没有它我们也可以正常开发#xff0c;但是useReducer可以使我们的代码具有更好的可读性#xff0c;可维护性。
useReducer 跟 useState 一样的都是帮我们管理组件的状态的#xff0c;但是呢与useState不同的是 useReducer…useReducer
useReducer是React提供的一个高级Hook,没有它我们也可以正常开发但是useReducer可以使我们的代码具有更好的可读性可维护性。
useReducer 跟 useState 一样的都是帮我们管理组件的状态的但是呢与useState不同的是 useReducer 是集中式的管理状态的。
用法 const [state, dispatch] useReducer(reducer, initialArg, init?)参数: reducer 是一个处理函数用于更新状态, reducer 里面包含了两个参数第一个参数是 state第二个参数是 action。reducer 会返回一个新的 state。 initialArg 是 state 的初始值。 init 是一个可选的函数用于初始化 state如果编写了init函数则默认值使用init函数的返回值否则使用initialArg。
返回值:
useReducer 返回一个由两个值组成的数组
当前的 state。初次渲染时它是 init(initialArg) 或 initialArg 如果没有 init 函数。 dispatch 函数。用于更新 state 并触发组件的重新渲染。
import { useReducer } from react;
//根据旧状态进行处理 oldState处理完成之后返回新状态 newState
//reducer 只有被dispatch的时候才会被调用 刚进入页面的时候是不会执行的
//oldState 任然是只读的
function reducer(oldState, action) {// ...return newState;
}function MyComponent() {const [state, dispatch] useReducer(reducer, { age: 42,name:小满 });// ...计数器案例
初始状态 (initialState):
const initialState { count: 0 };这里定义了一个初始状态对象包含一个 count 属性初始值为 0。
reducer 函数:
function reducer(state, action) {switch (action.type) {case increment:return { count: state.count 1 };case decrement:return { count: state.count - 1 };default:throw new Error();}
}reducer 是一个用来根据不同的 action 来更新状态的纯函数。它接收当前状态 (state) 和一个动作对象 (action)根据 action.type 来决定如何更新 state。如果 action.type 是 ‘increment’则 count 增加 1如果是 ‘decrement’则 count 减少 1。如果 action.type 不匹配任何已定义的情况则抛出一个错误。 App 组件:
const App () {const [state, dispatch] useReducer(reducer, initialState);return (Count: {state.count}button onClick{() dispatch({ type: decrement })}-/buttonbutton onClick{() dispatch({ type: increment })}/button/);
}
export default App;当点击 “-” 按钮时调用 dispatch({ type: ‘decrement’ })使 count 减少。当点击 “” 按钮时调用 dispatch({ type: ‘increment’ })使 count 增加。
购物车案例
初始数据 (initData):
const initData [{ name: 小满(只), price: 100, count: 1, id: 1, isEdit: false },{ name: 中满(只), price: 200, count: 1, id: 2, isEdit: false },{ name: 大满(只), price: 300, count: 1, id: 3, isEdit: false }
]initData 是一个数组表示初始的商品列表。每个商品有以下属性 name: 商品的名称例如 “小满(只)”。price: 单价例如 100。count: 数量默认为 1。id: 商品的唯一标识符。isEdit: 表示该商品名称是否处于编辑状态默认为 false。
类型定义 (List 和 Action):
type List typeof initData
interface Action { type: ADD | SUB | DELETE | EDIT | UPDATE_NAME, id: number, newName?: string
}List 是商品数组的类型直接从 initData 推断。Action 接口定义了不同的操作类型 ADD: 增加某个商品的数量。SUB: 减少某个商品的数量。DELETE: 删除某个商品。EDIT: 切换某个商品的编辑状态。UPDATE_NAME: 更新某个商品的名称。id: 需要操作的商品的 id。newName: 用于 UPDATE_NAME 操作时新的商品名称。
Reducer 函数 (reducer):
function reducer(state: List, action: Action) {const item state.find(item item.id action.id)!switch (action.type) {case ADD:item.countreturn [...state]case SUB:item.count--return [...state]case DELETE:return state.filter(item item.id ! action.id)case EDIT:item.isEdit !item.isEditreturn [...state]case UPDATE_NAME:item.name action.newName!return [...state]default:return state}
}reducer 函数根据传入的 action 更新商品列表的状态。 查找到要操作的商品 item。
对不同的 action.type 执行相应操作
ADD: 将商品数量增加 1。SUB: 将商品数量减少 1。DELETE: 删除指定商品。EDIT: 切换商品的编辑状态输入框显示或隐藏。UPDATE_NAME: 更新商品的名称。
App 组件:
function App() {let [data, dispatch] useReducer(reducer, initData)return (table cellPadding{0} cellSpacing{0} width{600} border{1}theadtrth物品/thth价格/thth数量/thth操作/th/tr/theadtbody{data.map((item) {return (tr key{item.id}td aligncenter{item.isEdit ? input onBlur{e dispatch({ type: EDIT, id: item.id })} onChange{e dispatch({ type: UPDATE_NAME, id: item.id, newName: e.target.value })} value{item.name} / : span{item.name}/span}/tdtd aligncenter{item.price * item.count}/tdtd aligncenterbutton onClick{() dispatch({ type: SUB, id: item.id })}-/buttonspan{item.count}/spanbutton onClick{() dispatch({ type: ADD, id: item.id })}/button/tdtd aligncenterbutton onClick{() dispatch({ type: EDIT, id: item.id })}编辑/buttonbutton onClick{() dispatch({ type: DELETE, id: item.id })}删除/button/td/tr)})}/tbodytfoottrtd colSpan{3}/tdtd aligncenter总价:{data.reduce((prev, next) prev next.price * next.count, 0)}/td/tr/tfoot/table/)
}App 组件使用 useReducer 来管理 data 状态它从 initData 初始化并通过 dispatch 分发动作来改变商品列表。商品列表通过 table 渲染每个商品显示以下信息物品如果该商品的 isEdit 为 true显示一个输入框用于修改名称否则显示商品名称。价格显示商品的总价price * count。数量显示商品的数量提供 - 和 按钮来减少或增加数量。操作提供 编辑 按钮切换名称编辑状态删除 按钮可以删除该商品。tfoot 部分显示购物车的总价通过 reduce 方法计算所有商品的总价。
