这篇文章主要讲解了“如何理解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 ( <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;
控制台输出
渲染了
渲染了
有时候我们会在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及获取路由参数这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。