React-Hooks之useReducer

1.什么是useReducer Hook?

从名称来看, 很容易会误以为useReducer是用来替代Redux的, 但是其实不是;useReducer是useState的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码
可以从下面一个实例对他进行理解
Demo：两个组件中有两个具有完全相同功能的方法increment&descrement
注意点: 不同组件中的useState保存的状态是相互独立的, 是相互不影响的

import React, {useState, 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() {
    function increment() {
        setNumState(numState + 1);
    }
    function decrement() {
        setNumState(numState - 1);
    }
    const [state, dispatch] = useReducer(reducer, {num: 0});
    return (
        <div>
            <p>{state.num}</p>
            <button onClick={increment()}>增加</button>
            <button onClick={discrement()}>减少</button>
        </div>
    )
}
function About() {
    const [numState, setNumState] = useState(5);
    function increment() {
        setNumState(numState + 1);
    }
    function decrement() {
        setNumState(numState - 1);
    }
    return (
        <div>
            <p>{state.num}</p>
            <button onClick={increment()}>增加</button>
            <button onClick={descrement()}>减少</button>
        </div>
    )
}
function App() {
    return (
        <div>
            <Home/>
            <About/>
        </div>
        )
}
export default App;

通过观察可以发现相同的方法increment和descrement要分别在2个组件中写，非常冗余
解决方案：useReducer

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

// 第一个参数：处理数据的函数
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;
    }
}

//第二个参数：保存的默认值
  const [state, dispatch] = useReducer(reducer, {num: 0});

• useReducer返回值:会返回一个数组, 这个数组中有两个元素
  • 第一个元素: 保存的数据
  • 第二个元素: dispatch函数

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

通过返回的state和dispatch派发任务和接受返回值

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

实例优化代码（使用useReducer）

import React, {useState, useReducer} from 'react';
// 1. 定义reducer函数，和reducer的写法相似
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() {
// 接受返回的参数，第一个参数是修改后的数据值，第二个参数是dispatch函数
    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: 5});
    return (
        <div>
            <p>{state.num}</p>
            <button onClick={()=>{dispatch({type:'ADD'})}}>增加</button>
            <button onClick={()=>{dispatch({type:'SUB'})}}>减少</button>
        </div>
    )
}
function App() {
    return (
        <div>
            <Home/>
            <About/>
        </div>
        )
}
export default App;

5B57C3E5.png