ReactHooks批量更新state及获取路由参数示例解析
短信预约 -IT技能 免费直播动态提醒
一、如何批量更新
在【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及获取路由参数的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
