一、如何批量更新在【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切换的插件封装 |