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及获取路由参数的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • react中常见hook的使用方式

    react中常见hook的使用方式

    1.什么是hook? react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state.ref.生命周期等属性. 2.为什么要出现hook? 函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state.ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使

  • 详解如何使用React Hooks请求数据并渲染

    前言 在日常的开发中,从服务器端异步获取数据并渲染是相当高频的操作.在以往使用React Class组件的时候,这种操作我们已经很熟悉了,即在Class组件的componentDidMount中通过ajax来获取数据并setState,触发组件更新. 随着Hook的到来,我们可以在一些场景中使用Hook的写法来替代Class的写法.但是Hook中没有setState.componentDidMount等函数,又如何做到从服务器端异步获取数据并渲染呢?本文将会介绍如何使用React的新特性Hook

  • 详解React setState数据更新机制

    为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re

  • 详解react如何在组件中获取路由参数

    路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li

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

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

    目录 一.如何批量更新 控制台输出 二.Hooks如何获取路由参数 执行效果 一.如何批量更新 在[Hooks]中如果单独的进行状态的更新可能会导致页面的多次渲染: import { useState } from 'react'; import { unstable_batchedUpdates } from 'react-dom';//批量更新状态时使用 import React from 'react'; const Example = () => { const [count, setC

  • Laravel中获取路由参数Route Parameters的五种方法示例

    前言 大家都知道Laravel 获取路由参数的方式有很多,并且有个小坑,现汇总如下,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 假设我们设置了一个路由参数: /** * 定义路由参数名称分别为: param1,param2 */ Route::get('/{param1}/{param2}', 'TestController@index'); 现在我们访问 http://test.dev/1/2 在 TestController 中: /** * 路由参数获取方法 * *

  • Laravel 之url参数,获取路由参数的例子

    如下所示: echo '<pre>'; var_dump( $request->url() ); // url echo '</pre>'; echo '<pre>'; var_dump( $request->route( 'email' ) ); //获取路由参数 echo '</pre>'; echo '<pre>'; var_dump( $request->method() ); // methed echo '</

  • laravel实现批量更新多条记录的方法示例

    前言 相信熟悉laravel的童鞋都知道,laravel有批量一次性插入多条记录,却没有一次性按条件更新多条记录. 是否羡慕thinkphp的saveAll,是否羡慕ci的update_batch,但如此优雅的laravel怎么就没有类似的批量更新的方法呢? 高手在民间 Google了一下,发现stackoverflow( https://stackoverflow.com/questions/26133977/laravel-bulk-update )上已经有人写好了,但是并不能防止sql注入

  • JSP和JSTL获取服务器参数示例

    复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JSP和JSTL获取服务器参数</

  • React中路由参数如何改变页面不刷新数据的情况

    目录 React路由参数改变页面不刷新数据的情况 React页面路由 前端路由和后端路由 前端路由介绍 匹配模式 路由的执行过程 hash模式 history模式 react-router-dom API React路由参数改变页面不刷新数据的情况 路由的参数由于是在componentDidMount中获取的,如果在详情页面再次打开详情页面,由于组件并没有重新渲染,导致didMount不会获取路由参数. 因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量.

  • 基于express中路由规则及获取请求参数的方法

    express中常见的路由规则 主要使用的路由规则是get和post两种,即 var express = require('express'); var app = express(); app.get(); // get和post两种请求方式 app.post(); app.get()和app.post()的第一个参数为请求路径,第二个参数为处理请求的回调函数:回调函数有两个参数,分别为req和res,代表请求信息和响应信息. 获取请求路径和请求体中的各种参数 路径请求及对应获取请求路径的形式

  • laravel框架中路由设置，路由参数和路由命名实例分析

    本文实例讲述了laravel框架中路由设置,路由参数和路由命名.分享给大家供大家参考,具体如下: laravel中必须先配置路由,才能使用.不像tp中不配置也能使用,因为tp可以通过pathinfo进行自动解析. 一.简单的路由设置 我们一般在routes/web.php文件中配置网页端路由. //参数一,表示uri路径 //参数二,闭包函数,处理响应 Route::get('/test', function () { return '测试'; }); 二.路由方法,处理特定http请求方式 R

  • python获取文件后缀名及批量更新目录下文件后缀名的方法

    本文实例讲述了python获取文件后缀名及批量更新目录下文件后缀名的方法.分享给大家供大家参考.具体实现方法如下: 1. 获取文件后缀名: 复制代码 代码如下: #!/usr/bin/python import os dict = {} for d, fd, fl in os.walk('/home/ahda/Program/'):         for f in fl:                 sufix = os.path.splitext(f)[1][1:]           

随机推荐