React 的 useReducer 就是简单封装过的 useState 吗?是一种官方倡导的复杂情况状态处理思路?

2024-01-29 17:19:36 +08:00
 richards64

刚接触 React 的时候就有些不太理解useReducer的用法,总感觉用起来比useState还要繁琐,而且有些不够直观,所以基本上也没有使用过。最近看了新版的 React 官网文档过后发现,甚至官方直接在文档里以留做习题的形式给出了一个用useState来实现的useReducer

import { useState } from 'react';

export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

所以useReducer就是简单封装过的useState吗?有什么单用useState做不到的事情吗?实际在开发中面对一个组件有多个参数状态需要分别控制的时候是使用一组useState比较多还是一个对象然后用useReducer来控制不同字段比较多?

1498 次点击
所在节点    React
4 条回复
zonghow
2024-01-29 17:51:10 +08:00
CQRS
codehz
2024-01-30 10:05:17 +08:00
最大的区别就是 dispatch 函数始终保持固定的引用,但却能始终保证调用到最新的 reducer 函数,这意味着它作为参数传递给别的组件( memo 过的)不会导致 rerender ,当然 useState 返回的 dispatch 函数也是固定的,但它不能包含自定义逻辑
与其说用 useState 实现 useReducer ,不如说 useReducer 可以实现 useState ,当然为了效率 react 实际上不会这么做
csl123
2024-01-30 10:41:30 +08:00
@codehz 我记得第一版的 useState 就是用 useReducer 实现的
lianggggg
2024-01-30 10:52:31 +08:00
你恰好说反了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://yangjunhui.monster/t/1012523

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX