一文带你快速了解React常用hook useReducer 特点与使用

React Hook useReducer，这是 React 16.8 引入的一个新的 Hook，它允许开发者使用调度策略的类似 Redux 的 reducer 来处理状态的变更。使用 useReducer 可以使状态管理更加清晰和有效。在我们日常react开发中也是常常用到。

先来看一下 useReducer 的定义：

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

其中 reducer 是一个纯函数，用于处理状态的变更，它需要处理两个参数：当前的状态和要发送的 action 对象，它将返回更新后的新状态：

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

而 initialState 是用于初始化状态的值。

dispatch 是一个用于调度 action 的函数，它接受一个 action 对象作为参数，并将它传给 reducer，从而更新状态：

dispatch({ type: 'INCREMENT' });

注意，dispatch 可以接受 action 对象，也可以接受一个返回 action 对象的函数，这种情况下，函数的参数是 dispatch 函数本身，如：

dispatch(dispatch => {
  setTimeout(() => {
    dispatch({ type: 'INCREMENT' });
  }, 1000);
});

这样，可以实现异步状态变更，例如定时器场景。

用这种方式来实现状态变更比使用 setState 更加清晰和有效，下面是一个简单的实例：

import React, { useReducer } from 'react';

const initialState = {
  count: 0
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [ state, dispatch ] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </>
  );
}

在上面的代码中，使用 useReducer 定义了一个 reducer 函数，该函数处理关于计数器的状态变更，我们使用 dispatch 函数来触发 state 的变更，每次变更都会调用 reducer 函数，从而更新状态，这样就可以实现对计数器的控制。

总结来说，React Hook useReducer 是一种非常强大的状态管理工具，它类似于 Redux 的 reducer，可以使用调度策略来处理状态的变更，使状态管理更加清晰和有效，具有可读性强，实现异步状态变更的能力。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情