【React Hooks 学习笔记】useReducer

简介: 前端西瓜哥

大家好,我是前端西瓜哥。今天我们继续 React Hooks 的学习,说一下 useReducer。

useReducer 是一种用于维护状态的 Hook,是在 useState 基础上的封装加强。

useReducer 的用法

useReducer 的常用用法是接受一个 reducer 函数,以及一个状态的初始值。状态的初始值会传给 state,reducer 函数则被组装进 dispatch 方法中,控制各种复杂的状态更新。

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

reducer 函数这个概念来自 Redux,一个状态管理容器库。它接收当前状态值 state 和行为类型 action,来决定返回哪个值作为最新状态。

我们看看下面的例子:

function reducer(state, action) {
  switch (action.type) {
    case 'inc':
      return { count: state.count + 1 };
    case 'dec':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      throw new Error('未能找到匹配类型');
  }
}

可以看到,类型不同,会触发不同的分支逻辑。比如当 action.type 为 'inc'(增加的意思)时,我们会将原本的 state.count 加一,然后返回这个新的 state。这个新的 state 会被 dispatch 拿去更新为最新的状态

下面我们看一个完整的计数器例子,为了表示状态的复杂性,我们用了对象的形式,直接用数字类型其实也可以。

// 注:reducer 在前文的代码块中声明。
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <div>count { state.count }</div>
      <button onClick={ () => dispatch({ type: 'inc' }) }>+1</button>
      <button onClick={ () => dispatch({ type: 'dec' }) }>-1</button>
      <button onClick={ () => dispatch({ type: 'reset' }) }>重置</button>
    </div>
  )
}

一个 dispatch 配合上 action.type,我们就能有多种操作状态的方式。

useReducer 还可以通过传入第三个参数——初始化函数 init,来实现惰性初始化。

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

组件首次渲染时,第二个参数会被传入到初始化函数中执行,然后拿执行完的返回值作为状态的初始值。

useReducer 的优点

useReducer 的优点是:

  1. 通过内聚的方式,解决复杂 state 状态更新逻辑的代码维护问题,比如一些有很多属性的对象。
  2. 传递给子组件也方便些,不用传多个改变状态的函数,传一个 dispatch 就够了。
  3. dispatch 函数在每次渲染仍保持引用不变,可以配合 React.memo() 进行子组件渲染优化。

对于更新状态简单的场景,就没有必要使用 useReducer。

结尾

某种意义上,你可以认为 useReducer 是 useState 应用了 Redux 哲学的魔改版,目的是优雅地进行复杂状态的管理。

相关文章
|
8天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
8天前
|
前端开发 JavaScript
react常用的hooks有哪些?
react常用的hooks有哪些?
18 0
|
6天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
6天前
|
前端开发 JavaScript
深入理解React中的useReducer:管理复杂状态逻辑的利器
深入理解React中的useReducer:管理复杂状态逻辑的利器
|
6天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
8天前
|
缓存 前端开发
Web开发:深入探讨React Hooks的使用和最佳实践
Web开发:深入探讨React Hooks的使用和最佳实践
18 0
|
8天前
|
存储 前端开发 JavaScript
React Hooks实战:从useState到useContext深度解析
React Hooks 深度解析:useState用于函数组件的状态管理,通过初始化和更新状态实现渲染控制;useContext则提供跨组件数据传递。useState的状态更新是异步的,不支持浅比较,可结合useEffect处理副作用。useContext在多层组件间共享状态,但可能导致不必要的渲染。两者结合可创建复杂应用场景,如带主题切换的计数器。了解其工作原理和优化策略,能有效提升React应用性能。
22 0
|
8天前
|
前端开发 API 开发者
React Hooks API:自定义Hooks的创建与使用
【4月更文挑战第25天】本文介绍了React自定义Hooks的创建与使用。自定义Hooks是提升React开发效率的关键工具。
|
8天前
|
前端开发 JavaScript
React中的状态管理:useState与useReducer的使用与探讨
【4月更文挑战第25天】本文探讨了React中构建动态界面的关键——状态管理,重点关注`useState`和`useReducer` Hook。`useState`适用于简单状态管理,例如计数器,而`useReducer`在处理复杂逻辑和多个状态更新时更具优势,提供更好的组织和可维护性。选择使用哪个取决于状态逻辑复杂度、可维护性和性能需求。合理运用这两个工具能实现高效、可维护的React应用。
|
8天前
|
前端开发
探索React Hooks:一种全新的组件逻辑管理方式
React Hooks是React 16.8版本引入的一项新功能,它改变了我们编写React组件的方式。本文将从Hooks的起源讲起,逐步分析Hooks的优势,并通过具体示例展示Hooks在组件逻辑管理中的应用,旨在帮助读者更好地理解和运用React Hooks。

热门文章

最新文章