iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ReactHooks批量更新state及获取路由参数示例解析
  • 259
分享到

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

2024-04-02 19:04:59 259人浏览 独家记忆
摘要

目录一、如何批量更新控制台输出二、Hooks如何获取路由参数执行效果 一、如何批量更新 在【Hooks】中如果单独的进行状态的更新可能会导致页面的多次渲染: import { u

一、如何批量更新

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

--结束END--

本文标题: ReactHooks批量更新state及获取路由参数示例解析

本文链接: https://www.lsjlt.com/news/137344.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作