ReactHooks batch update state and get route parameters example analysis

1. How to update in batches

Console Output

2. How Hooks Get Routing Parameters

Execution effect

1. How to update in batches

In [Hooks], updating the status separately may cause multiple renderings of the page:

import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom'; //Use when updating status in batches 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 (
    <span>Please check the console output! </span>
  );
}
export default Example;

Console Output

Rendered Rendered Rendered Rendered Rendered

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

This is implemented in class through setState

hooks can be implemented through unstable_batchedUpdates

import { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom'; //Use when updating status in batches 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 being processed}, 1000);
  console.log('rendered')
  return (
    <span>Please check the console output! </span>
  );
}
export default Example;

Console Output

Rendered Rendered

2. How Hooks Get Routing Parameters

Sometimes we will specify parameters in route , so that we can pass the component parameters directly through the URL

<Route path="/test/:name" component={Statistics} />

In Class, you can get the parameters of the url through this.props.match.params

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 (
    <p>The name is: <span style={{ fontWeight: 600 }}>{name}</span></p>
  );
}
export default Example;

match.params is the parameters in the route

Execution effect

The above is the detailed content of the analysis of the example of batch updating state and obtaining routing parameters in ReactHooks. For more information about batch updating state and obtaining routing parameters in ReactHooks, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: