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

這篇文章主要講解了“如何理解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;

控制臺輸出

渲染了
渲染了

二、Hooks如何獲取路由參數

有時候我們會在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及獲取路由參數這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！