目錄

• 一、如何批量更新
• 控制檯輸出
• 二、Hooks如何獲取路由引數
• 執行效果
  

一、如何批量更新

在【Hooks】中如果單獨的進行狀態的更新可能會導致頁面的多次渲染：

import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';//批量更新狀態時使用
import React from 'react';
const Example = () => {
  const [count,setCount] = useStawww.cppcns.comte(0);
  const [count1,setCount1] = useState(0);
  const [isClick,setCount2] = useState(0);
  setTimeout(function () {
    setCount(1)
    setCount1(1)
    setCount2(1)
  },100www.cppcns.com
 
0);
  console.log('渲染TYcYh了')
  return (
    <span>請檢視控制檯輸出！</span>
  );
}
export default Example;

控制檯輸出

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

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

class中是通www.cppcns.com過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,setCount2] = useState(0);
  setTimeout(function () {
    unstable_batchedUpdates(() => {
      setCount(1)
      setCo
 
unt1(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

如果是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及獲取路由引數的資料請關注我們其它相關文章！