V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
richards64
V2EX  ›  React

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

  •  
  •   richards64 · 309 天前 · 1282 次点击
    这是一个创建于 309 天前的主题,其中的信息可能已经有所发展或是发生改变。

    刚接触 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来控制不同字段比较多?

    4 条回复    2024-01-30 10:52:31 +08:00
    zonghow
        1
    zonghow  
       309 天前
    CQRS
    codehz
        2
    codehz  
       308 天前 via iPhone
    最大的区别就是 dispatch 函数始终保持固定的引用,但却能始终保证调用到最新的 reducer 函数,这意味着它作为参数传递给别的组件( memo 过的)不会导致 rerender ,当然 useState 返回的 dispatch 函数也是固定的,但它不能包含自定义逻辑
    与其说用 useState 实现 useReducer ,不如说 useReducer 可以实现 useState ,当然为了效率 react 实际上不会这么做
    csl123
        3
    csl123  
       308 天前
    @codehz 我记得第一版的 useState 就是用 useReducer 实现的
    lianggggg
        4
    lianggggg  
       308 天前
    你恰好说反了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1634 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:52 · PVG 00:52 · LAX 08:52 · JFK 11:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.