React-Hooks-useReducer

前言

useReducer 是 React 中的一个 Hooks，用于处理复杂的状态逻辑。它允许您管理本地组件状态，将复杂的状态管理逻辑分解成可维护的部分，类似于 Redux 的 reducer。以下是关于 useReducer 的简介：

useReducer 的工作方式类似于传统的 React 类组件中的 this.setState，但更适用于处理复杂状态和操作。它接受两个参数：reducer 函数和初始状态。

1. reducer 函数：这是一个纯函数，接受当前状态和一个操作（action），并返回新状态。它用于定义如何根据操作来更新状态。例如，当用户点击按钮时，您可以派发一个操作（action），然后 reducer 函数根据操作来计算新的状态。
2. 初始状态：这是状态的初始值，通常是一个对象，表示组件的初始状态。

useReducer 返回一个包含当前状态和 dispatch 函数的数组。dispatch 函数用于触发操作，并传递给 reducer 函数。当您调用 dispatch 时，它会引发状态的更新，然后触发组件的重新渲染。

与 useState 不同，useReducer 更适合处理复杂的状态逻辑，例如表单验证、多步骤操作或需要依赖先前状态的更新。它使状态管理更加可预测和可维护，因为所有状态更新的逻辑都集中在 reducer 函数中。

总之，useReducer 是 React 中的一个强大 Hooks，适用于管理复杂的组件状态和操作。它能够使状态逻辑更清晰、更可控，有助于编写更健壮的组件。

useReducer Hook 概述

• 从名称来看, 很多人会误以为 useReducer 是用来替代 Redux 的, 但是其实不是
• useReducer 是 useState 的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码

首先来用一个案例来带出 useReducer 的使用，案例大致内容为，分别定义了不同的组件然后在各个组件当中编写，自增自减的业务如下：

代码语言：javascript复制

import React, {useState} from 'react';

function Home() {
    const [numState, setNumState] = useState(0);

    function increment() {
        setNumState(numState   1);
    }

    function decrement() {
        setNumState(numState - 1);
    }

    return (
        <div>
            <p>{numState}</p>
            <button onClick={() => {
                increment()
            }}>增加
            </button>
            <button onClick={() => {
                decrement()
            }}>减少
            </button>
        </div>
    )
}

function About() {
    const [numState, setNumState] = useState(0);

    function increment() {
        setNumState(numState   1);
    }

    function decrement() {
        setNumState(numState - 1);
    }

    return (
        <div>
            <p>{numState}</p>
            <button onClick={() => {
                increment()
            }}>增加
            </button>
            <button onClick={() => {
                decrement()
            }}>减少
            </button>
        </div>
    )
}

export default function App() {
    return (
        <div>
            <Home/>
            <About/>
        </div>
    )
}

注意点:

• 不同组件中的 useState 保存的状态是相互独立的, 是相互不影响的

通过对如上示例的观察可以发现，出现了需要重复的业务逻辑代码，那么在我们使用了 useReducer 之后就会发现大大的优化了。

useReducer 接收的参数：

• 第一个参数: 处理数据的函数
• 第二个参数: 保存的默认值

useReducer 返回值，会返回一个数组, 这个数组中有两个元素：

• 第一个元素: 保存的数据
• 第二个元素: dispatch 函数

代码语言：javascript复制

import React, {useReducer} from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'ADD':
            return {...state, num: state.num   1};
        case 'SUB':
            return {...state, num: state.num - 1};
        default:
            return state;
    }
}

function Home() {
    const [state, dispatch] = useReducer(reducer, {num: 0});
    return (
        <div>
            <p>{state.num}</p>
            <button onClick={() => {
                dispatch({type: 'ADD'})
            }}>增加
            </button>
            <button onClick={() => {
                dispatch({type: 'SUB'})
            }}>减少
            </button>
        </div>
    )
}

function About() {
    const [state, dispatch] = useReducer(reducer, {num: 0});

    return (
        <div>
            <p>{state.num}</p>
            <button onClick={() => {
                dispatch({type: 'ADD'})
            }}>增加
            </button>
            <button onClick={() => {
                dispatch({type: 'SUB'})
            }}>减少
            </button>
        </div>
    )
}

export default function App() {
    return (
        <div>
            <Home/>
            <About/>
        </div>
    )
}

最后

本期结束咱们下次再见