图文示例讲解useState与useReducer性能区别

 更新时间:2023年05月16日 08:52:54   作者:卡颂  
这篇文章主要为大家介绍了useState与useReducer性能区别图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

引言

稍微深入了解过useState的同学都知道 —— useState其实是预置了reduceruseReducer。具体来讲,他预置的reducer实现如下:

function basicStateReducer(state, action) {
  // $FlowFixMe: Flow doesn't like mixed types
  return typeof action === 'function' ? action(state) : action;
}

那按理来说,useStateuseReducer性能应该完全一致才对。但实际上,他们的性能并不一样。本文就来聊聊他们的细微差别。

一个严重的bug

v18之前,特定场景下,useReducer存在一个严重的bug。假设我们要挂载如下App组件:

function App() {
  const [disabled, setDisabled] = React.useState(false);
  return (
    <>
      <button onClick={() => setDisabled((prev) => !prev)}>Disable</button>
      <div>{`Disabled? ${disabled}`}</div>
      <CounterReducer disabled={disabled} />
    </>
  );
}

通过点击按钮,可以切换disabled状态,并将disabled作为props传递给CounterReducer组件。

CounterReducer组件的实现如下:

function CounterReducer({ disabled }) {
  const [count, dispatch] = useReducer((state) => {
    if (disabled) {
      return state;
    }
    return state + 1;
  }, 0);
  return (
    <>
      <button onClick={dispatch}>reducer + 1</button>
      <div>{`Count ${count}`}</div>
    </>
  );
}

count状态初始为0,当disabled propstrue时,点击reducer + 1按钮count不会变化。

disabled propsfalse时,点击reducer + 1按钮count会加1。

现在问题来了,当disabled propstrue时(此时count为0),我们点击reducer + 1按钮5次,然后再点击Disable按钮disabled props会变为false),此时count为多少呢?

按照代码逻辑,改变disabledcount不会造成影响,所以他应该保持原始状态不变(即为0)。

但在v18之前,他会变成5。

但是,如果我们用useState实现同样逻辑的useReducer

function CounterState({ disabled }) {
  const [count, dispatch] = useState(0);
  function dispatchAction() {
    dispatch((state) => {
      if (disabled) {
        return state;
      }
      return state + 1;
    });
  }
  return (
    <>
      <button onClick={dispatchAction}>state + 1</button>
      <div>{`Count ${count}`}</div>
    </>
  );
}

就能取得符合预期的效果。

所以说,useReducer的实现在特殊场景下是有bug的(v18之前)。

bug是如何产生的

产生这个bug的原因在于React内部的一种被称为eager state的性能优化策略。

简单的说,对于类似如下这样的,即使多次触发更新,但状态的最终结果不变的情况(在如下例子中count始终为0):

function App() {
  const [count, dispatch] = useState(0);
  return <button onClick={() => dispatch(0)}>点击</button>;
}

App组件是没有必要render的。这就省去了render的性能开销。

要命中eager state,有个严格的前提 —— 状态更新前后不变。

我们知道,React中有两种更新状态的方式:

  • 传递新的状态
// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(100)
  • 传递更新状态的函数
// 定义状态
const [count, dispatch] = useState(0);
// 更新状态
dispatch(oldState => oldState + 100)

那么,对于方式1,要保证状态不变很简单,只需要全等比较变化前后的状态,如果他们一致就能进入eager state策略。

对于方式2,就略微复杂点,需要同时满足2个条件:

  • 状态更新函数本身不变
  • 通过状态更新函数计算出的新状态也不变

比如,下述代码就同时满足2个条件,但如果将change放到App内就不满足条件1(App组件每次render时都会创建新的change函数):

// 状态更新函数本身不变
function change(oldState) {
  // 新状态也不变
  return oldState;
}
function App() {
  const [count, dispatch] = useState(0);
  // 状态更新函数每次render都会变化
  // function change(oldState) {
     // 新状态不变
     // return oldState;
  // }
  return <button onClick={() => dispatch(change)}>点击</button>;
}

类似的情况,在useState的实现中,虽然他是预置了reduceruseReducer,但他预置的reducer的引用是不变的,所以用他实现的文章开篇的例子可以命中优化策略。

useReducer在特定场景下的bug就与此相关。并不是说bug产生的原因是useReducer一定没命中优化策略,而是说相比于useState,他命中优化策略很不稳定。

v18之后的改变

既然bug来源于不稳定的性能优化策略,在没有完美的解决方案之前,React是如何在v18中修复这个bug的呢?

答案是 —— 移除useReducereager state策略。也就是说,在任何情况下,useReducer都不再有useState存在的这个性能优化策略了。

这就导致在特定场景下,useReducer的性能弱于useState

比如在v18在线示例中,同样的逻辑用useState实现,不会有冗余的render,而useReducer会有。

总结

在考虑性能优化时,如果useStateuseReducer都能满足需要,或许useState是更好的选择。

以上就是useState与useReducer性能区别图文示例详解的详细内容,更多关于useState useReducer性能区别的资料请关注程序员之家其它相关文章!

相关文章

  • 基于useImperativeHandle的使用解析

    基于useImperativeHandle的使用解析

    这篇文章主要介绍了基于useImperativeHandle的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • react如何获取state的值并更新使用

    react如何获取state的值并更新使用

    这篇文章主要介绍了react如何获取state的值并更新使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 详解vant2 自动检查表单验证 -validate

    详解vant2 自动检查表单验证 -validate

    这篇文章主要介绍了vant2 自动检查表单验证 -validate,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • React?中使用?Redux?的?4?种写法小结

    React?中使用?Redux?的?4?种写法小结

    这篇文章主要介绍了在?React?中使用?Redux?的?4?种写法,Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态,本文就React使用?Redux的相关知识给大家介绍的非常详细,需要的朋友参考下吧
    2022-06-06
  • react中使用better-scroll滚动插件的实现示例

    react中使用better-scroll滚动插件的实现示例

    滚动在很多地方都可以使用,本文主要介绍了react中使用better-scroll滚动插件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • React中的Hooks路由跳转问题

    React中的Hooks路由跳转问题

    这篇文章主要介绍了React中的Hooks路由跳转问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • React学习笔记之列表渲染示例详解

    React学习笔记之列表渲染示例详解

    最近在学习React,学习到了列表渲染这一块,发现网上这方面的资料较少,所以自己来总结下,下面这篇文章主要给大家介绍了关于React学习笔记之列表渲染的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • React-Native中一些常用组件的用法详解(一)

    React-Native中一些常用组件的用法详解(一)

    这篇文章主要跟大家分享了关于React-Native中一些常用组件的用法,其中包括View组件、Text组件、Touchable类组件、TextInput组件以及Image组件的使用方法,分别给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-06-06
  • React18之状态批处理的使用

    React18之状态批处理的使用

    本文主要介绍了React18之状态批处理的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React根据宽度自适应高度的示例代码

    React根据宽度自适应高度的示例代码

    本篇文章主要介绍了React根据宽度自适应高度的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论

?


http://www.vxiaotou.com