ReactHooks批量更新state及獲取路由參數(shù)示例解析
一、如何批量更新
在【Hooks】中如果單獨的進行狀態(tài)的更新可能會導(dǎo)致頁面的多次渲染:
import { useState } from 'react'; import { unstable_batchedUpdates } from 'react-dom';//批量更新狀態(tài)時使用 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
來實現(xiàn)的
hooks
則可以通過unstable_batchedUpdates
來實現(xiàn)
import { useState } from 'react'; import { unstable_batchedUpdates } from 'react-dom';//批量更新狀態(tài)時使用 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如何獲取路由參數(shù)
有時候我們會在route
中指定參數(shù),這樣就可以直接通過URL進行組件的傳參了
<Route path="/test/:name" component={Statistics} />
在Class中通過this.props.match.params
可以獲取url的參數(shù)
如果是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
就是路由中的參數(shù)
執(zhí)行效果
以上就是ReactHooks批量更新state及獲取路由參數(shù)示例解析的詳細(xì)內(nèi)容,更多關(guān)于ReactHooks批量更新state及獲取路由參數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07