您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 13:40:25
  javascript

一、如何批量更新

在【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及获取路由参数的资料请关注51zixue.net其它相关文章!


下载地址:
安装nodejs和yarn及配置淘宝源过程记录
JavaScript实现table切换的插件封装
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。