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 Hook之使用Effect Hook的方法

    React Hook之使用Effect Hook的方法

    这篇文章主要为大家详细介绍了React 使用Effect Hook的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • React+Mobx基本使用、模块化操作

    React+Mobx基本使用、模块化操作

    React 和 MobX 是一对强力组合,React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染,而MobX提供机制来存储和更新应用状态供 React 使用,这篇文章主要介绍了React+Mobx基本使用、模块化,需要的朋友可以参考下
    2022-09-09
  • 一文带你了解React中的函数组件

    一文带你了解React中的函数组件

    函数式组件的基本意义就是,组件实际上是一个函数,不是类,下面这篇文章主要给大家介绍了关于React中函数组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • React鼠标多选功能的配置方法

    React鼠标多选功能的配置方法

    本文给大家分享React鼠标多选功能,通过导入组件直接包裹已经设计好的列表即可,操作简单方便,对React鼠标多选相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • react批量引入svg图标的方法

    react批量引入svg图标的方法

    这篇文章主要介绍了react批量引入svg图标的方法,在批量引入之前,我们需要安装一个包并配置到typescript.json文件中,需要的朋友可以参考下
    2024-03-03
  • 利用CDN加速react webpack打包后的文件详解

    利用CDN加速react webpack打包后的文件详解

    下面小编就为大家分享一篇利用CDN加速react webpack打包后的文件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 使用webpack5从0到1搭建一个react项目的实现步骤

    使用webpack5从0到1搭建一个react项目的实现步骤

    这篇文章主要介绍了使用webpack5从0到1搭建一个react项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • react中代码块输出,代码高亮显示,带行号,能复制的问题

    react中代码块输出,代码高亮显示,带行号,能复制的问题

    这篇文章主要介绍了react中代码块输出,代码高亮显示,带行号,能复制的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Redux使用方法和基本原理解读

    Redux使用方法和基本原理解读

    这篇文章主要介绍了Redux使用方法和基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论