首页 > 其他分享 >React HOOK:useRef

React HOOK:useRef

时间:2022-10-19 16:11:13浏览次数:47  
标签:current useRef const inputRef React HOOK 组件 import

useRef

useRef是用来在组件不同渲染之间共用一些数据的,它的作用和我们在类组件里面为this赋值是一样的。

语法

import {useRef} from "react"
const refObject = useRef(initialValue)
//useRef接收initialValue作为初始值,它的返回值是一个ref对象,这个对象的.current属性就是该数据的最新值。使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用
 

 

案例:

import { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
​
const AutoFocusInput = () => {
  const inputRef = useRef(null)
​
  useEffect(() => {
    // 组件挂载后自动聚焦
    inputRef.current.focus()
  }, [])
​
  return (
    <input ref={inputRef} type='text' />
  )
}
​
ReactDOM.render(<AutoFocusInput />, document.getElementById('root'))
//在上面代码中inputRef其实就是一个{current: input节点}对象,只不过它可以保证在组件每次渲染的时候拿到的都是同一个对象。
 

 

标签:current,useRef,const,inputRef,React,HOOK,组件,import
From: https://www.cnblogs.com/LIXI-/p/16806644.html

相关文章

  • React:生命周期函数
    生命周期钩子详解定义:在特定的阶段,ne你刚刚自动执行的函数(方法)。componentWillMount:在渲染前调用,在客户端也在服务端。componentDidMount:在第一次渲染后调用,只......
  • Redux and React
        ......
  • React:数组、列表渲染
    数组JSX允许在模板中插入数组,数组会自动展开所有成员vararr=[<h1>HTML</h1>,<h2>CSS</h2>];ReactDOM.render(<div>{arr}</div>,document.getElementB......
  • React-diff原理及应用
    抛砖引玉React通过引入VirtualDOM的概念,极大地避免无效的Dom操作,已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过对比新旧VirtualDOM来找出真正的Dom变......
  • React-Hook最佳实践
    ReactHook新出现背景类组件的问题复用组件状态难,高阶组件+渲染属性providerscustomers,等一堆工具都是为了解决这个问题,但是造成了很严重的理解成本和组件嵌套地狱......
  • React:条件渲染(三目运算符)
    在React中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。React中的条件渲染和JavaScript中的一样,使用Ja......
  • React高级特性之Render Props
    renderprop是一个技术概念。它指的是使用值为function类型的prop来实现Reactcomponent之间的代码共享。如果一个组件有一个render属性,并且这个render属性的值为一个返......
  • React高级特性之Context
    Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中,数据是通过props,自上而下地传递给子组件的。但是对于被大量组件使用的......
  • React的5种高级模式
    本文概述了5种现代高级React模式,包括集成代码、优点和缺点,以及在公共库中的具体用法。像每个React开发者一样,你可能已经问过自己以下问题之一我如何建立一个可重复使用......
  • React之高阶组件
    React之高阶组件注意:本章节运行环境在​​React项目构建​​章节之上。文章目录​​React之高阶组件​​​​高阶组件​​​​装饰器​​​​带参装饰器​​高阶组件​​let......