useReducer使用详解及其应用场景

前言

useReducer 实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。

一般情况下，我们使用 useState 就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些 。

• 状态逻辑复杂：当状态的更新逻辑比较复杂时，使用 useReducer 可以将这个逻辑封装在 reducer 函数中，使代码更加清晰易懂。
• 多组件共享状态：当多组件需要共享一个状态时，可以将这个状态放在父组件，然后通过 useReducer 将状态和更新函数传递给子组件，从而实现状态共享。
• 需要处理连续的多个状态更新：当需要连续处理多个状态更新时，使用 useReducer 可以帮助我们更好地管理状态的变化和更新。

1.useReducer 参数

接收 3 个参数：

• reducer 函数：（state, action）=> newState

在使用 useReducer 时，我们需要先定义一个 reducer 函数，这个函数接收 2个参数

• state ：是当前最新的状态值
• action：用于告诉 reducer 当前执行的操作，reducer 会根据不同的操作执行不同的逻辑，从而更新不同的 state
• newState：返回值，返回一个新的state

reducer 是一个纯函数，没有任何 UI 和 副作用。

• initState

这个没什么好说的，是指初始的state

• init ：是一个函数，（inState）=> initialState

这个参数是可选的，是一个函数，参数是初始的state。

如果传入了这个参数，那么 初始state 就是 init(initState) 的返回结果

2.useReducer 返回值

返回的是一个数组

//
const [state, dispatch] = useReducer(reducer, initState, getInitData);

• state ：当前的state
• dispatch：是一个函数，(action) => void

通过调用 dispatch 传入 action，来告诉 reducer 应该执行什么操作，然后更新 state

比如：

dispatch({type: 'ADD', playod: 'xxx'})

举一个简单的例子：

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

在上面的例子中，定义了一个 reducer 函数来管理状态的变化，它根据传入的 action 来执行不同的逻辑，返回新的状态。

在组件中，我们使用 useReducer 来初始化状态，并获取到一个 dispatch 函数来触发状态的更新。

点击按钮，会调用 dispatch 函数，并传入一个包含 type 属性的对象（即action）。这个对象用来表示将要进行的状态更新操作。

注意：

使用 useReducer 可以帮助我们更好的管理组件状态，使代码更易于维护和调试。

不过，在一般情况下，使用 useState 可能会更加简单和高效，我们在日常开发中，需要根据实际情况进行评估。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。

最新评论