React第十五节useReducer使用详解差异

useReducer() 的用法注意事项

1、 概述：

useReducer() 常用于管理复杂的状态更新逻辑，特别是在状态更新依赖于多个条件或动作时，useReducer 提供了一种更加结构化和可维护的方式来处理状态。可以将更新函数写在组件外面
它与 useState() 相似，useState() 用于处理相对简单的状态更新逻辑；

2、什么是useReducer():

它是React 提供的一个 HOOK，用于处理复杂的状态管理，特别是更新逻辑比较复杂，或者有多个状态相互依赖的逻辑业务中；

useReducer(reducer, initialArg, init?) 接收三个参数
第一个参数：reducer 用于更新 state 的纯函数，function(state, action) {}；函数接收两个参数 state、action；
其中 state 是只能读取的状态值，不能在纯函数里面进行直接修改；
其中 action 是用户进行操作的函数，
第二个参数：initialArg：用于初始化 state 的任意值，在没有第三个参数时候，直接取当前值为默认值，
第三个参数：init：为可选参数，用于处理state 的默认值函数；

3、基本写法：

const [count, dispatch] = useReducer(reducer, initState, initFunc)

useReducer(): 利用数组解构，得到两个参数，
count：当前state的初始值，
dispatch：用于触发count 更新的分发函数；
通常为一个包含type属性的对象；如

const [count, dispatch] = useReducer(reducer, {
   count: 1}, initFunc)
function handleDispatch() {
   
  dispatch({
   type: 'ADD'})
}

4、 具体使用例子

国庆出游计划 增删改成游玩项目

4.1 、声明reducer逻辑处理函数

注意：跟useState 一样，修改数组、对象时候，需要修改其指针，否则React视为当前值没有发生改变

// taskReducer 文件
export default function taskReducer(tasks, action) {
   
    switch(action.type) {
   
        case 'added':{
   
            return [
                ...tasks,
                {
   
                    id: action.id,
                    text: action.text,
                    done: false,
                }
            ]
        }
        case 'changed' : {
   
            return tasks.map(itm => {
   
                    if (itm.id