react | react中useRef详解

1 什么是 useRef

const refContainer = useRef(initialValue); 

• 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数 (initialValue)；
• 返回的 ref 对象在组件的整个声明周期内保持不变；
• 当更新 current 值时并不会 re-render，这是与 useState 不同的地方；
• 更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里；
• useRef 类似于类组件的 this；

简单示例
需求：点击 button 的时候，选中文本框
实现：

# .tsx
import React, {MutableRefObject, useRef} from "react"

const TextInputWithFocusButton: React.FC = () => {
  const inputEI: MutableRefObject<any>=useRef(null)
  const handleFocus = () =>{
    inputEI.current.focus()
  }
  return(
    <p>
      <input ref = {inputEI} type="text" />
      <button onClick={handleFocus}>Focus the input</button>
    </p>
  )
}

export default TextInputWithFocusButton

2 为什么要用 useRef

需求：跨渲染取到状态值

2.1 只用 useState

实现：

import React, {useState} from "react";

const LikeButton: React.FC = () => {
    const [like, setLike] = useState(0)
    function handleAlertClick() {
        setTimeout(() => {
            alert('you clicked on ${like}')
        }, 3000)
    }
    return(
        <>
          <button onClick={() => setLike(like + 1)}>{like}赞</button>
          <button onClick={handleAlertClick}>Alert</button>
        </>
    )
}

export default LikeButton