ReactHooks批量更新state及獲取路由參數(shù)示例解析
一、如何批量更新
在【Hooks】中如果單獨(dú)的進(jìn)行狀態(tài)的更新可能會(huì)導(dǎo)致頁(yè)面的多次渲染：
import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';//批量更新狀態(tài)時(shí)使用
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>請(qǐng)查看控制臺(tái)輸出！</span>
);
}
export default Example;
控制臺(tái)輸出
渲染了
渲染了
渲染了
渲染了
渲染了
所以需要使用批量更新來(lái)避免這個(gè)問(wèn)題！
class中是通過(guò)setState來(lái)實(shí)現(xiàn)的
hooks則可以通過(guò)unstable_batchedUpdates來(lái)實(shí)現(xiàn)
import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';//批量更新狀態(tài)時(shí)使用
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>請(qǐng)查看控制臺(tái)輸出！</span>
);
}
export default Example;
控制臺(tái)輸出
渲染了
渲染了
二、Hooks如何獲取路由參數(shù)
有時(shí)候我們會(huì)在route中指定參數(shù)，這樣就可以直接通過(guò)URL進(jìn)行組件的傳參了
<Route path="/test/:name" component={Statistics} />
在Class中通過(guò)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ù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
一篇文章教你用React實(shí)現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實(shí)現(xiàn)菜譜軟件的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-09-09
React使用有限狀態(tài)機(jī)的實(shí)現(xiàn)示例
本文主要介紹了React使用有限狀態(tài)機(jī)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例
本文主要介紹了react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
實(shí)現(xiàn)React單頁(yè)應(yīng)用的方法詳解
今天我們來(lái)學(xué)習(xí)React是如何構(gòu)建起一個(gè)單頁(yè)應(yīng)用的，React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學(xué)到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。下面一起來(lái)看看。2016-08-08
react實(shí)現(xiàn)移動(dòng)端下拉菜單的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)移動(dòng)端下拉菜單的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
react antd表格中渲染一張或多張圖片的實(shí)例
這篇文章主要介紹了react antd表格中渲染一張或多張圖片的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
本文主要介紹了React自定義Hook-useForkRef的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
react 通過(guò)后端接口實(shí)現(xiàn)路由授權(quán)的示例代碼
本文主要介紹了React應(yīng)用中通過(guò)后端接口獲取路由授權(quán),實(shí)現(xiàn)動(dòng)態(tài)和靈活的權(quán)限管理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑
相比于react-dnd，react-beautiful-dnd更適用于列表之間拖拽的場(chǎng)景，本文主要介紹了使用react-beautiful-dnd實(shí)現(xiàn)列表間拖拽踩坑，感興趣的可以了解一下2021-05-05