ReactHooks批量更新state及获取路由参数示例解析

 更新时间:2021年10月03日 14:39:31   作者:曲鸟  
这篇文章主要介绍了React Hooks如何实现批量更新state以及获取路由参数的示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助

一、如何批量更新

在【Hooks】中如果单独的进行状态的更新可能会导致页面的多次渲染:

import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';//批量更新状态时使用
import React from 'react';
const Example = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  const [isClick, setCount2] = useState(0);
  setTimeout(function () {
    setCount(1)
    setCount1(1)
    setCount2(1)
  }, 1000);
  console.log('渲染了')
  return (
    <span>请查看控制台输出!</span>
  );
}
export default Example;

控制台输出

渲染了
渲染了
渲染了
渲染了
渲染了

所以需要使用批量更新来避免这个问题!

class中是通过setState来实现的

hooks则可以通过unstable_batchedUpdates来实现

import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';//批量更新状态时使用
import React from 'react';
const Example = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  const [isClick, setCount2] = useState(0);
  setTimeout(function () {
    unstable_batchedUpdates(() => {
      setCount(1)
      setCount1(1)
      setCount2(1)
    })
    // 这里就是处理的事件
  }, 1000);
  console.log('渲染了')
  return (
    <span>请查看控制台输出!</span>
  );
}
export default Example;

控制台输出

渲染了
渲染了

二、Hooks如何获取路由参数

有时候我们会在route中指定参数,这样就可以直接通过URL进行组件的传参了

<Route path="/test/:name" component={Statistics} />

在Class中通过this.props.match.params可以获取url的参数

如果是Hooks的话,可以这样获取:

import { useState } from 'react';
import React from 'react';
const Example = ({ match }) => {
  const [name] = useState(match.params.name);
  return (
    <p>名称为:<span style={{ fontWeight: 600 }}>{name}</span></p>
  );
}
export default Example;

match.params就是路由中的参数

执行效果

以上就是ReactHooks批量更新state及获取路由参数示例解析的详细内容,更多关于ReactHooks批量更新state及获取路由参数的资料请关注脚本之家其它相关文章!

相关文章

  • 一篇文章教你用React实现菜谱系统

    一篇文章教你用React实现菜谱系统

    本篇文章主要介绍了React实现菜谱软件的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-09-09
  • React使用有限状态机的实现示例

    React使用有限状态机的实现示例

    本文主要介绍了React使用有限状态机的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • react.js实现页面登录跳转示例

    react.js实现页面登录跳转示例

    本文主要介绍了react.js实现页面登录跳转示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 实现React单页应用的方法详解

    实现React单页应用的方法详解

    今天我们来学习React是如何构建起一个单页应用的,React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。下面一起来看看。
    2016-08-08
  • react实现移动端下拉菜单的示例代码

    react实现移动端下拉菜单的示例代码

    这篇文章主要介绍了react实现移动端下拉菜单的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • react antd表格中渲染一张或多张图片的实例

    react antd表格中渲染一张或多张图片的实例

    这篇文章主要介绍了react antd表格中渲染一张或多张图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • React自定义Hook-useForkRef的具体使用

    React自定义Hook-useForkRef的具体使用

    本文主要介绍了React自定义Hook-useForkRef的具体使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • react 通过后端接口实现路由授权的示例代码

    react 通过后端接口实现路由授权的示例代码

    本文主要介绍了React应用中通过后端接口获取路由授权,实现动态和灵活的权限管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • react自适应布局px转rem实现示例详解

    react自适应布局px转rem实现示例详解

    这篇文章主要为大家介绍了react自适应布局px转rem实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 使用react-beautiful-dnd实现列表间拖拽踩坑

    使用react-beautiful-dnd实现列表间拖拽踩坑

    相比于react-dnd,react-beautiful-dnd更适用于列表之间拖拽的场景,本文主要介绍了使用react-beautiful-dnd实现列表间拖拽踩坑,感兴趣的可以了解一下
    2021-05-05

最新评论