react hooks--useReducer用法

useReducer是useState的替代方案，我们可以用它来处理复杂逻辑的state。此外它还可以和useContxt结合实现Redux进行状态管理。

一、基础用法

const [state, dispatch] = useReducer(reducer, initialState, initializer);

state：状态变量

dispatch：用于触发reducer 函数

reducer：reducer 函数，该函数接受state和action两个参数

initialState：状态的初始值

initializer：选填值。用于惰性提供初始状态

二、具体案例

通过useReducer实现数字的递增和递减操作。

import React, { useReducer } from 'react';
import './index.less';

function counter(count: number, action: string) {
  switch (action) {
    case 'inc':
      return count + 1;
    case 'dec':
      return count - 1;
    default:
      return count;
  }
}

const UseReducerExample: React.FC = () => {
  const [count, dispatch] = useReducer(counter, 0);

  return (
    <div className="box-wrap">
      <div>当前数字：{count}</div>
      <div>
        <button onClick={() => { dispatch('inc') }} >
          数字+1
        </button>
        <button onClick={() => { dispatch('dec') }} >
          数字-1
        </button>
      </div>
    </div>
  );
};

export default UseReducerExample;

三、效果展示

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。