如何理解ReactHooks批量更新state及获取路由参数

这篇文章主要讲解了"如何理解ReactHooks批量更新state及获取路由参数"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何理解ReactHooks批量更新state及获取路由参数"吧！

目录

• 一、如何批量更新

• 控制台输出

• 二、Hooks如何获取路由参数

• 执行效果
  

一、如何批量更新

在【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 (    请查看控制台输出！  );}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 (    请查看控制台输出！  );}export default Example;

控制台输出

渲染了
渲染了

二、Hooks如何获取路由参数

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

在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 (    
名称为:{name}
  );}export default Example;

match.params就是路由中的参数

执行效果

感谢各位的阅读，以上就是"如何理解ReactHooks批量更新state及获取路由参数"的内容了，经过本文的学习后，相信大家对如何理解ReactHooks批量更新state及获取路由参数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！