React-Hooks-useReducer

useReducer Hook 概述

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

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

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 函数

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>
    )
}