richards64
V2EX  ›  React

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

  •  
  •   richards64 · Jan 29, 2024 · 2218 views
    This topic created in 838 days ago, the information mentioned may be changed or developed.

    刚接触 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 replies    2024-01-30 10:52:31 +08:00
    zonghow
        1
    zonghow  
       Jan 29, 2024
    CQRS
    codehz
        2
    codehz  
       Jan 30, 2024 via iPhone
    最大的区别就是 dispatch 函数始终保持固定的引用,但却能始终保证调用到最新的 reducer 函数,这意味着它作为参数传递给别的组件( memo 过的)不会导致 rerender ,当然 useState 返回的 dispatch 函数也是固定的,但它不能包含自定义逻辑
    与其说用 useState 实现 useReducer ,不如说 useReducer 可以实现 useState ,当然为了效率 react 实际上不会这么做
    csl123
        3
    csl123  
       Jan 30, 2024
    @codehz 我记得第一版的 useState 就是用 useReducer 实现的
    lianggggg
        4
    lianggggg  
       Jan 30, 2024
    你恰好说反了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2824 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 15:29 · PVG 23:29 · LAX 08:29 · JFK 11:29
    ♥ Do have faith in what you're doing.