JavaScript中的useRef 和 useState介绍

目录
  • 1、useState hook
  • 2、useRef hook
  • 3、useRef 与 useState
  • 4、何时使用 Refs 和 States

1、useState hook

useState 是一个内置的 React hook,它允许您将信息作为状态存储在变量中。它允许您将 React 状态添加到功能组件。在下面的示例中,useState()声明状态变量,而值存储在计数变量中。setCount是用于更新此值的函数。

//从 react 导入 useState

import React, { useState } from 'react';

function Count() {

  // 声明一个名为 count 的新状态变量

  const [count, setCount] = useState(0);

2、useRef hook

useRef hook 是一个内置的 React hook,它将一个参数或参数作为其初始值,并返回一个引用或持久化的可变值。此引用,或简称 ref,包含可以使用当前属性检索的值。

我们还可以将用户输入存储在 refs 中并显示收集到的数据,如下所示:

//导入 useRef hook

import React, { useRef } from "react"

export default function App() {

  //创建一个变量来存储引用

  const nameRef = useRef();

  function handleSubmit(e) {

    //防止页面在提交时重新加载

    e.preventDefault()

    //输出 name

    console.log(nameRef.current.value)

  }

  return (

    <div className="container">

      <form onSubmit={handleSubmit}>

        <div className="input_group">

          <label>Name</label>

          <input type="text" ref={nameRef}/>

        </div>

        <input type="submit"/>

      </form>

    </div>

  )

}

3、useRef 与 useState

  • 与状态不同,存储在引用或引用中的数据或值保持不变,即使在组件重新渲染之后也是如此。因此,引用不会影响组件渲染,但状态会影响。
  • useState 返回 2 个属性或一个数组。一个是值或状态,另一个是更新状态的函数。相比之下, useRef 只返回一个值,即实际存储的数据。
  • 当参考值发生变化时,无需刷新或重新渲染即可更新。但是在 useState 中,组件必须再次渲染以更新状态或其值。

4、何时使用 Refs 和 States

refs 在获取用户输入、DOM 元素属性和存储不断更新的值时很有用。 但是,如果您要存储组件相关信息或在组件中使用方法,states 则是最佳选择。

所以总而言之,这两种 hook 各有优缺点,会根据情况和用途来使用。

到此这篇关于 JavaScript中的useRef useState介绍的文章就介绍到这了,更多相关 JavaScript中的useRef useState内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-25

示例详解react中useState的用法

useState useState 通过在函数组件里调用它来给组件添加一些内部 state.React 会在重复渲染时保留这个 state.useState 会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数.它类似 class 组件的 this.setState,但是它不会把新的 state 和旧的 state 进行合并. 接下来通过一个示例来看看怎么使用 useState. 有这么一个需求:需要在 iframe 中加载外部网页. 初始的代码我们通过

React中useRef的具体使用

相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象. 而useRef这个hooks函数,除了传统的用法之外,它还可以"跨渲染周期"保存数据. 首先来看一下它传统的用法: import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function App(props){ const [count, setCount] = useState(

React中阻止事件冒泡的问题详析

前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 |  A  --------------

浅谈React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,

深入理解React中es6创建组件this的方法

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

React中jquery引用的实现方法

在React中引用Jquery比较好玩,获取元素的数据更多 1.引入方法举例: import $ from 'jquery'; import { Button } from 'antd'; class testJquery extends React.Component { constructor(props) { super(props); this.selectElement = this.selectElement.bind(this); } render() { return( <div

简单谈谈React中的路由系统

React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

react中的ajax封装实例详解

react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

在React中如何优雅的处理事件响应详解

前言 本文主要给大家介绍的是关于React处理事件响应的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. React中定义一个组件,可以通过React.createClass或者ES6的class.本文讨论的React组件是基于class定义的组件.采用class的方式,代码结构更加清晰,可读性强,而且React官方也推荐使用这种方式定义组件. 处理事件响应是Web应用中非常重要的一部分.React中,处理事件响应的方式有多种. 一.使用箭头函数 先上代码: //代码1 class

React中使用collections时key的重要性详解

前言 大家应该都知道,在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered,下面话不多说,来一起看看详细的介绍: React 不会 render 重复的 keys 为了彻底明白这个, 我们来声明一个这样的数组 const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的 现在, 我们在 react 中来 render <ul> {nums.ma

es6在react中的应用代码解析

不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的,这会给我们的开发带来很大的便捷,你会体验到ES6语法的无比简洁.下面给大家介绍es6在react中的应用,具体内容如下所示: import React,{Component} from 'react'; class RepeatArrayextends Component{ constru

深入研究React中setState源码

React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定.修改数据的同时,可以实现View的刷新.这大大简化了我们的逻辑,只用关心数据流的变化,同时减少了代码量,使得后期维护也更加方便.这个特性则要归功于setState()方法.React中利用队列机制来管理state,避免了很多重复的View刷新.下面我们来从源码角度探寻下setState机制. 1 还是先声明一个组件,从最开始一步步来寻源: class App extends Comp