10-03 08:04 阅读 358

ReactHooks批量更新state及获取路由参数示例解析

这篇文章主要介绍了React Hooks如何实现批量更新state以及获取路由参数的示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助

一、如何批量更新

在【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;

控制台输出

渲染了
渲染了

有时候我们会在route中指定参数，这样就可以直接通过URL进行组件的传参了

1	`<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及获取路由参数示例解析的详细内容

原文链接：https://blog.csdn.net/momoda118/article/details/120436204