Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand ReactHooks batch update state and obtain routing parameters". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand ReactHooks batch update state and obtain routing parameters".

Catalogue

How to update in batches

Console output

2. How to obtain routing parameters by Hooks

Execution effect

How to update in batches

If you update the status separately in [Hooks], it may result in multiple rendering of the page:

Import {useState} from 'react';import {unstable_batchedUpdates} from' react-dom';// uses 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 ('rendered') return (check the console output! );} export default Example; console output

Rendered

Rendered

Rendered

Rendered

Rendered

So you need to use batch updates to avoid this problem!

Class is realized through setState.

Hooks can be implemented through unstable_batchedUpdates.

Import {useState} from 'react';import {unstable_batchedUpdates} from' react-dom';// uses 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)}) / / this is the event handled}, 1000); console.log ('rendered') return (check the console output! );} export default Example

Console output

Rendered

Rendered

2. How to obtain routing parameters by Hooks

Sometimes we specify parameters in route so that we can pass parameters to components directly through URL

The parameters of url can be obtained through this.props.match.params in Class.

If it is Hooks, you can get it like this:

Import {useState} from 'react';import React from' react';const Example = ({match}) = > {const [name] = useState (match.params.name); return (

The name is: {name}

);} export default Example

Match.params is the parameter in the route.

Execution effect

Thank you for your reading, the above is "how to understand ReactHooks batch update state and obtain routing parameters" content, after the study of this article, I believe you have a deeper understanding of how to understand ReactHooks batch update state and obtain routing parameters, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.