businessfragmentation

useRef介绍

useRef是一个 React Hook，它能帮助引用一个不需要渲染的值。

import { useRef } from 'react';
const refValue = useRef(initialValue)
// 访问ref的值 类似于vue的ref,Vue的ref是.value，其次就是vue的ref是响应式的
//而react的ref不是响应式的
refValue.current

参数

• initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略当组件re render的时候不会再重新渲染也就是说它的值在组件内部是可以持久化存储的。

返回值

useRef 返回一个只有一个属性的对象:

• current：初始值为传递的 initialValue。之后可以将其设置为其他值。
• 如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。在后续的渲染中， useRef 将返回同一个对象。

注意

• 可以修改 ref.current 属性。但是如果current存储的数据依赖项中有useState hook提供的state，就不应该通过current属性区修改而是应该通过setState。
• 改变 ref.current 属性时，React 不会重新渲染组件。React 不知道它何时会发生改变，因为 ref 是一个普通的 JavaScript 对象。
• 除了初始化外不要在渲染期间写入或者读取 ref.current ，否则会使组件行为变得不可预测。
• useRef不能直接获取子组件的实例，需要使用forwardRef

通过useRef操作DOM元素

import { useRef } from "react"
function App() {
  //首先，声明一个 初始值 为 null 的 ref 对象
  let div = useRef(null)
  const heandleClick = () => {
    //当 React 创建 DOM 节点并将其渲染到屏幕时，React 将会把 DOM 节点设置为 ref 对象的 current 属性
    console.log(div.current)
  }
  return (
    <>
      {/*然后将 ref 对象作为 ref 属性传递给想要操作的 DOM 节点的 JSX*/}
      <div ref={div}>dom元素</div>
      <button onClick={heandleClick}>获取dom元素</button>
    </>
  )
}
export default App

通过useRef组件内部数据存储

import React, { useLayoutEffect, useRef, useState } from 'react';

function App() {
   let num = useRef(0)
   let [count, setCount] = useState(0)
   const handleClick = () => {
      setCount(count + 1)
      num.current = count;
   };
   return (
      <div>
         <button onClick={handleClick}>增加</button>
         <div>{count}:{num.current}</div>
      </div>
   );
}

export default App;