如何理解ReactHooks批量更新state及獲取路由參數(shù)

這篇文章主要講解了“如何理解ReactHooks批量更新state及獲取路由參數(shù)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何理解ReactHooks批量更新state及獲取路由參數(shù)”吧！

目錄

• 一、如何批量更新

• 控制臺輸出

• 二、Hooks如何獲取路由參數(shù)

• 執(zhí)行效果
  

一、如何批量更新

在【Hooks】中如果單獨(dú)的進(jìn)行狀態(tài)的更新可能會導(dǎo)致頁面的多次渲染：

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>請查看控制臺輸出！</span>
  );
}
export default Example;

控制臺輸出

渲染了
渲染了
渲染了
渲染了
渲染了

所以需要使用批量更新來避免這個(gè)問題！

class中是通過setState來實(shí)現(xiàn)的

hooks則可以通過unstable_batchedUpdates來實(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>請查看控制臺輸出！</span>
  );
}
export default Example;

控制臺輸出

渲染了
渲染了

二、Hooks如何獲取路由參數(shù)

有時(shí)候我們會在route中指定參數(shù)，這樣就可以直接通過URL進(jìn)行組件的傳參了

<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)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何理解ReactHooks批量更新state及獲取路由參數(shù)這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！