首页 > 其他分享 >React HOOK:useReducer 与 useState区别?(面试)

React HOOK:useReducer 与 useState区别?(面试)

时间:2022-10-19 16:26:33浏览次数:44  
标签:状态 管理 useReducer React HOOK state useState 组件

useReducer vs useState(面试)

useReducer和useState都可以用来管理组件的状态,它们之间最大的区别就是:

  useReducer将状态和状态的变化统一管理在reducer函数里面,这样对于一些复杂的状态管理会十分方便我们debug,因为它对状态的改变是封闭的。而由于useState返回的setState可以直接在任意地方设置我们状态的值,当我们组件的状态转换逻辑十分复杂时,它将很难debug,因为它是开放的状态管理。

总体的来说,在useReducer和useState如何进行选择的问题上我们可以参考以下这些原则:

  • useState情况使用


    - state的值是JS原始数据类型,如number, string和boolean等
    - state的转换逻辑十分简单
    - 组件内不同的状态是没有关联的,它们可以使用多个独立的useState来单独管理

     

  • useReducer情况使用

    - state的值是object或者array
    - state的转换逻辑十分复杂, 需要使用reducer函数来统一管理
    - 组件内多个state互相关联,改变一个状态时也需要改变另一个,放在同一个state内使用reducer来统一管理
    - 状态定义在父级组件,不过需要在深层次嵌套的子组件中使用和改变父组件的状态,可以同时使用useReducer和useContext两个hook,将dispatch方法放进context里面来避免组件的props drilling
    - 如果你希望你的状态管理是可预测的和可维护的,请useReducer
    - 如果你希望你的状态变化可以被测试,请使用useReducer
  •  

标签:状态,管理,useReducer,React,HOOK,state,useState,组件
From: https://www.cnblogs.com/LIXI-/p/16806675.html

相关文章

  • React HOOK:useRef
    useRefuseRef是用来在组件不同渲染之间共用一些数据的,它的作用和我们在类组件里面为this赋值是一样的。语法import{useRef}from"react"constrefObject=useRef(i......
  • React:生命周期函数
    生命周期钩子详解定义:在特定的阶段,ne你刚刚自动执行的函数(方法)。componentWillMount:在渲染前调用,在客户端也在服务端。componentDidMount:在第一次渲染后调用,只......
  • Redux and React
        ......
  • React:数组、列表渲染
    数组JSX允许在模板中插入数组,数组会自动展开所有成员vararr=[<h1>HTML</h1>,<h2>CSS</h2>];ReactDOM.render(<div>{arr}</div>,document.getElementB......
  • React-diff原理及应用
    抛砖引玉React通过引入VirtualDOM的概念,极大地避免无效的Dom操作,已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过对比新旧VirtualDOM来找出真正的Dom变......
  • React-Hook最佳实践
    ReactHook新出现背景类组件的问题复用组件状态难,高阶组件+渲染属性providerscustomers,等一堆工具都是为了解决这个问题,但是造成了很严重的理解成本和组件嵌套地狱......
  • React:条件渲染(三目运算符)
    在React中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。React中的条件渲染和JavaScript中的一样,使用Ja......
  • React高级特性之Render Props
    renderprop是一个技术概念。它指的是使用值为function类型的prop来实现Reactcomponent之间的代码共享。如果一个组件有一个render属性,并且这个render属性的值为一个返......
  • React高级特性之Context
    Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中,数据是通过props,自上而下地传递给子组件的。但是对于被大量组件使用的......
  • React的5种高级模式
    本文概述了5种现代高级React模式,包括集成代码、优点和缺点,以及在公共库中的具体用法。像每个React开发者一样,你可能已经问过自己以下问题之一我如何建立一个可重复使用......