ReactHook之useRef

最新推荐文章于 2023-02-18 10:23:20 发布
最新推荐文章于 2023-02-18 10:23:20 发布
阅读量162 收藏
点赞数
分类专栏： React17/18 文章标签： ReactHook useRef createRef
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/125097487
版权

文章目录

一个案例

在这里插入图片描述
本案例涉及的代码文件，包括：

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. components/Demo/index.jsx，即Demo组件

模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>State Hook</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App/>,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import Demo from "./components/Demo"

export default class App extends Component {
  render() {
    return (
      <div>
          <Demo/>
      </div>
    )
  }
}

Demo/index.jsx（Demo组件）

import React, { Component, createRef } from 'react'

export default class Demo extends Component {
  myRef = createRef()

  handleClick = () => {
    alert(this.myRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.myRef}/>&nbsp;
        <button onClick={this.handleClick}>点我提示信息</button>
      </div>
    )
  }
}

函数式组件实现Demo

React Hook使得函数式组件可以使用state及其他React特性。

React Hook常见有：

  1. State Hook，即useState()
  2. Effect Hook，即useEffect()
  3. Ref Hook，即useRef()

本例演示Ref Hook，即useRef的使用。代码更改涉及的文件有：component/Demo/index.jsx。

import React,{useRef} from 'react';

export default function Demo(){
  const myRef = useRef();

  function handleClick(){
    alert(myRef.current.value);
  }

  return (
    <div>
      <input type="text" ref={myRef}/>&nbsp;
      <button onClick={handleClick}>点我提示信息</button>
    </div>
  )
}

useRef() 的使用和 createRef() 的使用很类似。

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-useRef:使用React Hook UseRef搜索值的React应用
04-17
React-用用户名搜索用户这个React应用程序是一个React应用程序，它从“ ”读取用户，并显示输入内容来搜索具有用户名的用户。安装您可以简单地将文件下载到计算机上。 在终端中，通过键入npm install 。 然后输入npm...
react-hook useRef用法
Z_Wonderful的博客
07-30 479
学习内容： react -hook useRef 存值的方法。 useRef： const refContainer = useRef(initialValue); useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。 一个常见的用例便是命令式地访问子组件： function TextInputWithFocusButton() { const inputEl = useRef(n
React: ref的使用
做个懂管理、懂产品，懂技术的大叔
05-07 361
Refs and the DOM Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 D...
React Hooks系列之useRef
热门推荐
Boboy
03-19 1万+
前言 react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更...
React Hook：useRef 钩子函数
学习笔记
01-11 288
使用 ref: reference 可以在最终呈现的 HTML 元素和其他 JavaScript 代码之间建立连接。 如下的代码，需要获取表单的 input 输入，一种方法是使用 useState() ,一个 input 一个 state，每次键盘按一个键，state 就更新一次。 但是，因为需要的只是最终结果，如果不需要每按一次键就验证一下输入是否合法的话，这种做法就显得冗余。这时可以使用 useRef 钩子函数： 首先 import useRef： import React, { useState,
React Hooks之useRef详解
RayShyy的博客
02-18 5141
useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
灵活的 React Hook 可根据滚动位置自动更新导航
06-08
react-use-scrollspy 安装 react-use-scrollspy 是一个需要 React 16.8.0 或更高版本的 React Hook。 // yarn yarn add react-use-scrollspy // 或者 npm npm i react-use-scrollspy --S 用法 import useScrollSpy ...
React Hook 跟踪功能组件的可见性
06-08
react-intersection-...演示和测试即将到来从“react-intersection-visible-hook”导入 useVisibility 如何使用它 function App() { const nodeRef = useRef(null); const 可见性 = useVisibility(nodeRef); 返回
platzimaster-forms-with-useref:使用hook useRef（）的表单示例
05-14
使用hook useRef（）的表单示例部署 这是从gndx / react-base（ ）生成的一个React项目。入门首先，运行开发服务器：npm run start 用浏览器打开以查看结果。学到更多要了解有关Next.js的更多信息，请查看以下资源：...
react-smooth-scroll-hook:一个在React组件中使用平滑滚动的React Hook
04-14
它提供了useSmoothScroll钩子来完成react组件中的平滑滚动行为，并提供了useScrollWatch来...import React , { useRef } from 'react' ; import useSmoothScroll from 'react-smooth-scroll-hook' ; export const Demo
React Hook入门系列（3）-- useRef
qq_33552742的博客
12-31 499
简介 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 优势 简化组件逻辑 复用状态逻辑 无需使用类组件编写 so，我们来学习第二个“Hook” - useRef 语法 // 定义 let r = useRef(null) // 参数是对象初始值 // 设置 <div ref={r}></div> // 使用 console.log(r) /
react hooks入门 -useRef
weixin_43154931的博客
04-21 1218
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。 import React, { useEffect, useRef } from 'react'; window.count = 0; const useRefDemo = () => { const count...
react 进阶hook 之 useRef hook
twinkle的博客
04-09 563
看到 ref 大家不管是在vue 中 还是在react 中都比较熟悉， vue3 的ref 有两个，vue2 有一个，但是ref 的作用都有一个公共的作用，那就是获取真实的dom。 在react 的类组件中，我们可以在类中定义属性 ref 详情, 但是在函数组件是不能直接使用 ref, 如果需要使用 ref 那么就只能是 ref 转发, 说实话这个函数组件的 ref 转发 是有点绕， 而且还会增加组件的层级。个人感觉不怎么友好。 语法 const refContainer = useRef(init..
React中函数式Hooks之useRef的使用
见贤思齐焉，见不贤内自省
11-29 846
useRef的基本使用 import React from 'react' import { Button } from 'antd' export default function Key(){ let myRef = React.useRef() const alertFun = ()=>{ alert(myRef.current.value) } return ( <div> <inpu
React Hook 之 useRef 及与React.createRef 区别
weixin_42192113的博客
09-06 1204
一、useRef useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref对象在组件的整个生命周期内保持不变。 import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function App(props){ const [count, setCount] = useState(0); const doubl
react Hook初探
标子 的专栏
04-16 1237
文章的代码来自https://www.cnblogs.com/qcloud1001/p/10408634.html。 下面是对这个代码以及react hook的分析。二话不说，直接上代码。 import React, { useState, useEffect, useRef } from 'react'; export default function App() { console.log...
react 16.7 hook概述
xiaohesong
10-30 2398
之前我们介绍了使用hooks的原因，在开始介绍api之前，现在我们先来整体的预览下这些api。 从上篇的介绍可以知道，Hook是向后兼容的，有react开发经验的你看起来会更顺畅。 是一个快节奏的概述。如果你感到困惑，可以看下上面提到的介绍里的动机： 详细说明 阅读动机以了解我们为何将Hooks引入React。 State Hook 看下面的例子，他是一个计数器 import { useSta...
在 React 和 Vue 中尝鲜 Hooks
li420520的博客
11-01 614
在美国当地时间 10 月 26 日举办的 React Conf 2018 上，React 官方宣布 React v16.7.0-alpha 将引入名为 Hooks 的新特性，在开发社区引发震动。 在 React 和 Vue 中尝鲜 Hooks 而就在同月 28 日左右，作为 “摸着鹰酱过河” 优秀而典型代表的 Vue.js 社区，其创始人 Evan You 就在自己的 github 上发布了 vu...
钢桁架结构振动特性渐变分析工具
最新发布
05-20
钢桁架结构振动特性渐变分析工具
reacthook useRef
03-28
React Hook `useRef` is a function that returns a mutable object with a `current` property that can be used to store and access a value across renders. It is similar to creating an instance property on...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值