ReactHooks批量更新state及獲取路由參數(shù)示例解析
更新時間：2021年10月03日 14:39:31 作者：曲鳥
這篇文章主要介紹了React Hooks如何實現(xiàn)批量更新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ù)示例解析的詳細內(nèi)容，更多關(guān)于ReactHooks批量更新state及獲取路由參數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解各版本React路由的跳轉(zhuǎn)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
react中的watch監(jiān)視屬性-useEffect介紹
這篇文章主要介紹了react中的watch監(jiān)視屬性-useEffect使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中，有哪些場景的組件協(xié)同？又如何去實現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09
這篇文章主要為大家歸納總結(jié)了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文主要介紹了react實現(xiàn)每隔60s刷新一次接口的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本篇文章主要介紹了深入理解React高階組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料，文中通過圖文介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
最近使用react做個滾動監(jiān)聽獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報錯解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下2022-08-08